My responsive layout works down to 480px on PC. My phone is 480px wide. Why doesn't it fit?

I’ve made a website that is responsive and uses Foundation.
On my PC the layout scales well down below 480px. But on my smartphone (which is supposed to have a 480px x 800px screen) it is squashed and goes off the side of the screen.

For example, there is an image which is 440px wide, but on my smartphone it’s about 30% wider than the screen. It’s not doing anything clever with the css, it’s just a fixed width image.

What’s going on?
Some googling implied it might be viewport related, but I checked and the basic Foundation page layout that it’s based on already includes

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Anyone have any ideas?

Could we get a reproduced test case? I don’t think we have volunteers here on Sitepoint that are psychic :slight_smile: .

1 Like
  1. What phone?
  2. Can we see either the site or a test case or else screenshots or pastes of some code?

HTC Incredible S.
I’ll try to put together a test case, but it’s a client’s website so I’ll need to strip out all the branding etc…

Can you snippet the code for the actual image or around it? Just out of curiosity, to make sure there isn’t some easy “oops” mistake of some kind before you spend a lot of time mocking something up.

Ok. I’ve knocked together something to show the issue. I’ve stripped out most of the page and so the styles might not be 100% working. But it should show the basic problem. (which is probably an easy oops mistake).

link to test page

As you can see, nothing on that page should be more than about 480px wide, yet on my (supposedly 480px wide) phone screen the top boxes get squished together to fit on screen, and the bottom image is about 30% wider than the screen (which would make it about 600px wide).

On my pc, if I shrink the browser window to about 480px it seems to fit ok.

I’m guessing it’s something to do with viewports or something similar. But everything I’ve read about them implies that the correct viewport is already set.

PS/ If I set the viewport width to 480px then it seems to render the top boxes correctly, but the whole page is 30% wider than the screen.
I can pinch-zoom out to make it fit on screen though. But the the foundation topbar menu (not in demo) gets shrunk to be tiny.

You are setting hard widths on these elements


Probably more.

A couple of things I notice.

There is a horizontal scrollbar appearing at 670px on the desktop which may be confusing the width calculations. You’ve set the media queries in em which means that if the browsers default is 16px then your 40 em kicks in at 641px which doesn’t match your design.

I’m not a fan of em media queries but if you do use them then as Ryan has mentioned you need to code your elements in em also in case the default font-size is different to what you expect.

1 Like

Notwithstanding my comments above the actual issue is that you are assuming that 480px is the viewport width but that is the resolution of the device. The HTC has a pixel density of 1.5 which means it has a viewport width of 320px (320 x 1.5 = 480) i.e. it crams 480px into 320px space giving a better display.

You need to let your layout scale down to 320px or use pixel density media queries to make the changes where required.

The best course of action is to make all your responsive sites scale down to 320px and just offer better images for the higher density displays where required (if that is an issue).

1 Like

To be honest I’m not sure why you’d scale down to just your own phone size anyway, that’s not a current standard (480) that I know of…

Yes good point :). 320px is the most common anyway so my previous post makes sense either way :wink:

Yeah, I was confused about why OP was doing that, I agree with your post 100%
Hadn’t occurred to me to check on the phone beyond it’s “resolution”

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