The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS looks right, but img not responsive

  • # June 16, 2013 at 12:32 am

    Hi there,

    I would like the header png to be responsive on this page here:

    There’s the HTML

    And the CSS

    .pageheader img {
    width: 100%;
    height: auto;

    Does anyone see what I’m missing?

    (The full style.css does validate with some warnings)

    Thanks in advance.

    # June 16, 2013 at 12:36 am

    Go to your media query css part and add this:


    # June 16, 2013 at 1:01 am

    The above information won’t completely fix it.

    The answer you are really looking for involves the .pageheader CSS styling.

    Change the width: 960px; to 100%, then set a max-width: 960px; on the pageheader class. Then it will scale correctly, currently the main issue is you are using a fixed width div in a responsive site which is not going to flex.

    # June 16, 2013 at 1:02 pm

    @scotttnix and @CoodeGraphics

    Thanks! .pageheader {width: 100%;} fixed it right away.

    Really appreciate it!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed