Replacing the inline height with max-height: 90% and adding this custom CSS will do that:
#header-widget-area * {
display: inline;
}
Thread Starter
Tom
(@atomiktd)
@thezedt
Thank you, it works!
I haven’t realized I can use * as HTML tag 🙂
I placed following in my style.css
/* responsive header widget area */
#header-widget-area * {
display: inline;
max-height: 90%;
}
#header-widget-area p {
margin-left: 30%;
}
and it works for all sizes except smallest one (for smartphones) but I believe I can work it out 🙂
You can check it out here Tai Chi Poznan
Tom,
I’m having a similar problem on a site I’m working on: http://dev.spugnardi.com
Did you end up sizing your logo back up to or did you have to change the original size? I’ve added the code you did with no luck
Thread Starter
Tom
(@atomiktd)
@monroecm
What I have is Text widget in Header Widgets area:
<p style="text-align: center;">
<a title="Tai Chi dla Firm" href="http://www.taichi.poznan.pl/tai-chi-dla-firm/">
<img class="noframe aligncenter" title="Formuła TaijiFit dla Firm gwarancją sukcesu!" src="http://www.taichi.poznan.pl/wp-content/uploads/pictures/formula-taijifit-dla-firm.png" alt="Formuła TaijiFit dla Firm gwarancją sukcesu!"/>
</a>
</p>
Class “noframe” is used only to remove borders, that come with all images.
CSS is like this:
/* responsive header widget area */
#header-widget-area * {
display: inline;
max-height: 90%;
}
#header-widget-area p {
margin-left: 30%;
}
I use Nirvana child-theme so I use separate style.css file.
monroecm,
I like your website. Can you tell me how you got the three columns i.e. Rocking Chair, etc. with pictures on top?
layoutscribe,
Thanks. It’s actually an included widget with Nirvana. You can access it from the widgets menu. Didn’t have to style them at all besides matching the colors. Just inputted the text and image.
And thanks Tom, I’ll give that a try a little later,
