Grow your CSS skills. Land your dream job.

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:
    http://dev.moerylai.com/blog/

    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:

    img{
    max-width:100%;
    }

    # 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.

*May or may not contain any actual "CSS" or "Tricks".