Forums

Greek Yogurt Site Name Block Alignment

Permalink
I have two blocks in my Site Name in a new project with the Greek Yogurt theme. I'd like the two blocks to be aligned on the left, but I'm getting the second block to the right of the first block (see attached image).

Is this due to the theme coding, or am I doing something wrong? I'd also like to have the nav bar on the left but can't figure out how to do that either.

Thanks for any help.

-Alan

1 Attachment

alanhalley
 
drbiskit replied on at Permalink Reply
drbiskit
It is probably being caused by a float:left CSS rule being applied to what I'm presuming is an H1 element in your header.

The easiest option would possibly be to just put all of that text into one block, but if you want to keep it in 2 blocks, open the file: 'typography.css' in your theme directory + look for the style 'div#main-container #header h1' - On about line 138:

div#main-container #header h1 {
   font-size: 28px;
   margin-left: 45px;
   padding-bottom: 55px;
   margin-bottom: 0;
   display: inline;
   float: left;
}


Change it to (note the last 2 lines have been changed):

div#main-container #header h1 {
   font-size: 28px;
   margin-left: 45px;
   padding-bottom: 55px;
   margin-bottom: 0;
   display: block;
   float: none;
}


That should force the second block to appear directly underneath the first block.
alanhalley replied on at Permalink Reply
alanhalley
The H1 was causing the problem. I removed it and the two blocks now align left.

The header nav stack probably needs something similar, doesn't it?

Thanks!
drbiskit replied on at Permalink Reply
drbiskit
Yeah possibly... If you don't already, try using the Firebug add-on with Firefox, this allows you to see details of any given element, and the CSS styles that are affecting it - plus a whole bunch of other useful info. Install it, and then right click on the element in question on your page and select 'Inspect element with firebug' - this will then open a panel with a bunch of tabs, look at the html tab (selected by default), and this shows the generated markup for the page, and the related CSS - It's incredibly useful for troubleshooting all sorts of issues such as this.

Hope that helps!