I need to make my website responsive with iPhone 5s in media query. I try every thing but can’t able to solve the solution for iPhone 5s in media query.
Plz check the URL
Any one can please help me.
Not all of us have iPhone 5s…please describe what your issue is.
Yes, rather a vague question. When using media queries, it’s best to add them in as you go rather than trying to retrofit, as you often will forget to override certain things, such as this (line 53 style.css):
#delicious {
width: 1136px;
}
That’s causing a big right scroll on small screens, but removing it fixes the issue.
Issue is that my client have Iphone 5s and when he view the website in his Iphone it didn’t scale upto full width. I am attaching the image. you can see iturself.
Does any have the solution for it.
Try changing the meta tag to just this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I see a horizontal scrollbar before the first smaller media query kicks in and at narrower widths I see none at all even though some content is overflowing the browser window, so I suspect you have some disfunctional code in your CSS. Do not use overflow:hidden on the outermost container, etc. Fix the basic code and I bet even the iPhone 5s will work.
I don’t have time to look now, but that’s what I would start looking for.
Oh, and just in case you’ve never heard of the HTML validator, give your page a run through and see how it fares.
Just in a quick glance, I see some deal-breakers in there… duplicate ID’s for starters.
Ralph gave you the solution in post #3.
You must ensure that there are no horizontal scrollbars at the width that you are targeting otherwise the device must make the site and the area outside the scrollbar fit into the viewport thus resulting in a gap at the side.
Also it is bad practice to prevent user scaling so use just the viewport meta tag that Ron suggests above.
This means that where i need to use overflow:hidden; i manually adjust the height of any container background.
I use height AUTO but it didn’t work so that’s why i use overflow:hidden.
Plz correct me if i am wrong.
Where was height mentioned in Ralph’s answer?
The problem is the width and you need to remove the width for smaller devices.
Just ensure that you can close your browser window without a horizontal scrollbar appearing and then you will be ok for smaller devices. If a horizontal scrollbar appears then that means the device will scale the visible page smaller until the portion that has the scroll can fit into the smaller viewport resulting in the layout shown in your screenshots.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.