Responsive adaptions

[chechu]

Hey all,

In the header of my site http://storiesalongtheway.com you can see the logo left and text on the right, nicely aligned.
When responsive, the logo becomes smaller, but the text stays on the right and is too high, so it doesn't align anymore.
How can I make the text appear below the logo in responsive, both centered ?

This is the current css:



#menu{padding:0 90px 2px 298px;float:left;}
#menu li{display:inline;list-style-type:none;}
#menu li a{display:block;float:left;font-family:Tahoma, sans-serif;font-size:11px;color:#E8F6FF;font-weight:bold;text-decoration:none;background-position:top left;background-repeat:no-repeat;margin:0 1px 0 0;height:31px;line-height:31px;text-align:center;}
.logo{width:35.96%;height:27.03%;float:left;}
.logo img{margin: -5px}
.buttons{width:64.04%;height:27.03%;float:left;}
.buttons p{float:left;font: italic 1.30em "Baskerville", Georgia, Times, serif;color:#777;padding:5px 10px 0px 5px;text-align:right;}
#main{width:100%;margin:0 auto;padding:0px;overflow:hidden;background-color:#fff;margin-bottom:50px; }
#mainleft{width:100%;margin:0 auto;padding:0px;float:left;overflow:hidden;}


Thanks for your help.

[Beverleyh]

Hi chechu,

I think I'd be tempted to use device size media queries to change the CSS at common break-points : http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Then you can use .logo:after { content:"\A"; } to add a line break after your logo.

[chechu]

Exactly what I need.
Thanks a lot !