Webpage loads at Half width on iPhone

Hi Gang,
This is my first sitepoint post and hopefully I’ll be spending some more time here (usually on stackexchange.com). I’ve got a strange issue with 1 page on site I’ve developed recently. The site is built on Zurb’s Foundation with Wordpress.

I’ve got a peculiar problem where 95% of a site I’ve developed works perfectly in a responsive manner, but 1 page loads at 50% width on the iPhone for some reason… Here’s a screenshot

And the problematic URL is www.viraone.com/mission

I have no idea why this would be happening for one page only. I’ve tried some code comparison tool to check differences between source code but I can’t track anything down.

Does anyone have any ideas why this maybe be happening or how I might go about eliminating potential culprits?
Thanks a ton!

Your screenshot requires permissions, might want to share it with “Anyone with link”

Are you using varied page templates - is there a different template used for this particular page?

Skimmed through the styles and such with dev tools and nothing popped out at me, but gotta head off for a bit…

Hi,

You have an iframe containing a video and the iframe is set at 640px wide. A 320px device will squeeze the iframe to fit into the viewport resulting in the rest of the content being half width.

Scale your iframe smaller with the vieport.

Also your transposh element in the header is causing a permanent scrollbar so you should increase its width a little to avoid this happening.

2 Likes

@PaulOB Thanks a ton! I knew it would most likely be something as standout as the video. Silly me to not have picked that up.

Thanks for the link to A List Apart for a solution too. I’ve placed the following code into my CSS and wrapped the video with

and we’re all good.

 .videoWrapper {
	position: relative;
	/*padding-bottom: 75%; /* 4:3 */
        padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
        height: 0;
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

I’m tempted to implement something with jQuery instead like these guys because adding new markup on content when the site users are beginners is not ideal, but I couldn’t get their code to work as I would have hoped and my jQuery skills aren’t great.

Anyways, I’ve learned a new responsive design glitch I’ll be able to spot in the future. Thanks a ton!

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