WordPress.com

1. thepatternedplate
   Member
   Dec 17, 2012, 8:50 PM

   Hi,

   I have been fiddling a fair bit trying to figure this out but have given up and am asking for help. On my blog, http://thepatternedplate.wordpress.com/
   there is extra space between the menu and the dividing line below it. I'd like to shorten that. Also, how can I bring down the search widget in the menu area to align alongside it?
   Any help will be much appreciated :-)

   Thanks
   Caroline @ The Patterned Plate

   The blog I need help with is thepatternedplate.wordpress.com.

2. thepatternedplate
   Member
   Dec 28, 2012, 7:16 PM

   Any suggestions?

3. designsimply
   Staff
   Dec 29, 2012, 8:31 PM

   I think setting a max-height on #header would be a good way to do it:

   #header {
   	max-height: 340px;
   }

   Just remember to remove that or readjust if you change to a header with a different height later.

   This will make the search box line up a little more nicely:

   #header-right .widget_search form {
   	margin-top: 18px;
   }

   And if you want a way to visualize different elements and their spacing try adding borders with different colors and look at them using the Preview button. Doing this usually helps me a lot if there's something funky going on with spacing that I can't figure out at first.

   #branding { border: 1px solid red; }
   #header-left { border: 1px solid green; }
   #header-right { border: 1px solid blue; }

4. thepatternedplate
   Member
   Dec 30, 2012, 7:25 PM

   Oh thank you for replying! Especially at this time of year! Hope its been a good Christmas for you :-)

   The tip with the coloured boxes is superb! I've saved that one for future use.

   The search widget and header alignment are perfect. There is still a lot of space between that and the dividing line at the bottom, the one that rests directly on top of the first row of posts. Any way to pull all that up? Or something? It's only after I've uploaded the Christmas banner that it went to pot!

5. designsimply
   Staff
   Jan 2, 2013, 1:32 PM

   There is still a lot of space between that and the dividing line at the bottom, the one that rests directly on top of the first row of posts. Any way to pull all that up?

   Did you add this part?

   #header {
   	max-height: 340px;
   }

   That makes it look like this for me: http://cl.ly/Ltlp

   If you also want to shorten up the space below the gray line but above the boxes, you could add this as well:

   #boxes {
       padding-top: 10px;
   }

6. designsimply
   Staff
   Jan 2, 2013, 1:35 PM

   It's only after I've uploaded the Christmas banner that it went to pot!

   Ah, yes. That is because you have added some very specific modifications to your custom CSS. Because of those, you will need to adjust the CSS heights for things any time you change out the header image to one that has a different height.

   Oh thank you for replying! Especially at this time of year! Hope its been a good Christmas for you :-)

   Merry Christmas! Mine was filled with travel and family time, so no complaints here at all. I am lucky to have had some time off in December this year.

   I love your blog. :) You might be interested to know that I cooked Christmas dinner all on my own for the very first time this year. It was what I like to refer to as a "cooking adventure." :D

Topic Closed

This topic has been closed to new replies.