Responsive header issue between browsers

In the following link, I have it exactly how I need it in Firefox, but in Chrome I don’t get to see the same amount of the header pic as I do in Firefox.

I think the container is the isssue within the header, but cant work out why its height is greater in Firefox and not in Chrome.

Link to site

It looks exactly the same to me in Firefox and Chrome unless I misunderstood.

Have you got screenshots of what you see in both browsers so we can see what’s going on?

Hi Paul,

What I can see is in Chrome the pic bottom ends up around the middle of the girl, the top of her chest. In mozilla, you can see both peoples arms the screen they looking at.

Its the amount of the pic that’s view-able.

I have used media css for different screen sizes, so maybe we looking at different views, I’ve got a wide monitor.

This is what I see in both Firefox and Chrome when the browsers are at the same width.

Ah ok, so they both not right then…

The image is bigger than that, and need it to show more of the image.


The only way you can show more of the image is by increasing the height of the container as the screen gets bigger. It’s a mater of basic mathematics in that to maintain the aspect ratio the image height and width must increase proportionately.

At the moment the height of the header stops at 520px so as the page gets wider the image gets bigger and bigger
in both directions resulting in only the heads showing in the space available.

You either need to create a header that scales at the aspect ratio or find a better ‘letter-box’ style image to show at wider screens.

You haven’t shown the screenshots of where you say it looks ok in Firefox? I;m just guessing you have the browsers open at different widths

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.