Width issue on iPhone

[p1rulz]

I am working on a wordpress site using the twenty fourteen theme as the base. It is responsive however the total width of the site is appearing on only about 50% of the iphone screen. On desktop screens it shows the full width even if I switch it to a different user agent for iphone. I tested this in Safari, Firefox and Chrome and in all browsers it behaves the same. Just the mobile device view is not appearing properly. Please help.

Here is the development site link: http://smw14coverage.wpengine.com.

[janet4now]

Try changing your viewport settings in the header to:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">

[Paulie_D]

The meta doesn’t seem detailed enough

<meta name="viewport" content="width=device-width">

try adding

initial-scale=1"

Viewport Meta @ MDN

https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

[Paulie_D]

Try changing your viewport settings in the header to:
<meta name=”viewport” content=”initial-scale=1, maximum-scale=1″>

I would not recommend using maximum-scale=1…we’re not all blessed with 20/20 vision and some of us need to scale web pages.

Poor UX to disable that option IMO.

[p1rulz]

Updated and added initial-scale=1 but it still doesn’t display properly in mobile device. The only item that is displayed in full width is the logo.

[Paulie_D]

The logo images have inline CSS for their dimensions…so they won’t change responsively.

You might also want to check out some of the Console errors…there seem to be quite a few.

[janet4now]

Did you create a child theme or edit the 2014 theme directly?

[p1rulz]

Created a child theme of 2014.

[Claudiu Sararu]

Hey… Have you used any @media queries? Everything seems so sqeezed together at <600px….
you should add max-width: 100% to your logo image.
you should also set .homerightcolumn and .int_leftcolumn both to width: 100%; clear: both; on @media (max-width:600px)

And i think that should solve your problem. Feel free to check some of the videos made by Chris (owner of css-tricks) related to responsive webdesign. It should give you more insight on responsive webdesign and/or troubleshooting it. You can also try a framework like Bootstrap or Foundation for responsive webdesign or at least a CSS responsive grid system like Gridify for a more faster/simpler way to code responsive design.

[Author]

Posts