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
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!
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.
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!