Responsive image (size) in Header widgets area

Replacing the inline height with max-height: 90% and adding this custom CSS will do that:

#header-widget-area * {
    display: inline;
}

@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: https://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

@monroecm
What I have is Text widget in Header Widgets area:

<p style="text-align: center;">
  <a title="Tai Chi dla Firm" href="https://www.taichi.poznan.pl/tai-chi-dla-firm/">
    <img class="noframe aligncenter" title="Formu?a TaijiFit dla Firm gwarancj? sukcesu!" src="https://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,