Support » Theme: Nirvana » Responsive image (size) in Header widgets area

  • Tom

    (@atomiktd)


    Hi,

    I’d like to show image in Header widgets area but I am unsuccessful when it comes to it’s height and responsiveness. I cannot make it header height which is 150px in my case. Of course I can fix it on 150px but it is not responsive, always the same size and hiding under navmenu when window size shrinks.

    At the moment it is 100px height what makes it fit well nearly any screen sizes but when it comes to my laptop with 1280px width, image looks ugly, very small. You can see it here Tai Chi Poznan

    I was experimenting with different CSS settings but to no avail.

    Is it possible to make it responsive of header height? Any ideas?

Viewing 6 replies - 1 through 6 (of 6 total)
  • thezedt

    (@thezedt)

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

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

    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

    monroecm

    (@monroecm)

    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

    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.

    layoutscribe

    (@layoutscribe)

    monroecm,

    I like your website. Can you tell me how you got the three columns i.e. Rocking Chair, etc. with pictures on top?

    monroecm

    (@monroecm)

    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,

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Responsive image (size) in Header widgets area’ is closed to new replies.