CSS looks right, but img not responsive

[Bluej]

Hi there,

I would like the header png to be responsive on this page here:
http://dev.moerylai.com/blog/

There’s the HTML

. . . the image url

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.

[CodeGraphics]

Go to your media query css part and add this:

img{
max-width:100%;
}

[scottnix]

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.

[Bluej]

@scotttnix and @CoodeGraphics

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

Really appreciate it!

[Author]

Posts