Responsive Design not working Correctly on iPhones in Landscape mode

[WebWerx 0]

I am having an issue with the code below inasmuch as when I test on an iPhone in Landscape mode, it does not work at all. Everything is fine in portrait mode. Hmmm???

/* Sitewide Media Query Tweaks */
	@media (max-width:479px) {
	  .phone {display:none;}
	  .proud {display:none;}
	  .search-box-top-right {display:none;}
	  .homepage-box {display:none;}
	  #fbox_7560 {display:none;}
	  #fbox_7561 {display:none;}
	  #fbox_7562 {display:none;}
	  #contentbox .red-footer-banner {display:none;}
	  .section-sb_footcols {display:none;}
	  .section-sb_fullwidth {display:none;}
	  .widget-pad {display:none;}
	}

I must be missing something. The site can be viewed at 480px here: http://mattkersley.com/responsive/ > Paste this in the box: http://goo.gl/YXHZ7

[catrina 103]

The site should be able to adapt to iPhone landscape mode. Which version of Framework are you using?

[WebWerx 0]

@catrina: 2.2.1 (and don't suggest that I upgrade to 2.2.2 - [b]:-)[/b] )

[WebWerx 0]

@catrina: I also tried it in Adobe Shadow - same result.

[Danny+ 1,327]

Hi WebWerx, Can yo do me a favour and remove temporally your custom code Homebox and see if your site works correctly in landscape mode. I think this issue may be caused by your custom HTML.

[evert100 1]

A tip i use the plugin "browser specfic css". Works great. in your css don't you need .iphone instead of .phone? The responsiveness works great. www.edugram.nl The problem i had was the margin which exits between menu and branding. So far i solved it for the iphone. Is there a general class for smartphones?

[Stefan 6]

Hey Webwerx, Just tested in landscape & portrait mode on an iPhone and I get pretty much the same result. Were you able to fix the issue?

[WebWerx 0]

@Danny: Thanks for the input. I did try your suggestion and no luck. Then I got to thinking... I had used "max-width:479px" per a suggestion from @beardedavenger. If smaller resolutions worked, why would a larger (iPhone portrait) not work. Hmmm. So instead of going down, I went up to max-width:481px - adding 1 px. So anything below 481px would take my CSS calls.... And... yes sir it works.... DOH! @evert100: .phone is the selector for the phone number at the top of our site. My intent is to eliminate all unnecessary elements of the homepage and interior page sidebars on smaller screen sizes as it is simply too busy. So everything you see in my sample code is meant to not be viewed on screen sizes 480 px and below. iPhone, Blackberries (if anyone still has one), Windows phones etc... I am just learning this stuff, so I may be missing something somewhere along the line. BTW I used Adobe Shadow in my testing (highly recommended).

[evert100 1]

@WebWerx the testsite you gave is not working correct. I have the same result using an "user-agent-switch" add-on for the Firefox. Using the body-class .iphone as i implemented in my website doesn't give a accurate result. On the iphone it does! Did you take a look at the plugin i mentioned? You don't have to struggle with all "the max/min-width" stuff. Good luck.

[WebWerx 0]

@evert100: Now I get why you were mentioning .iphone... just looked at the browser specific CSS plugin.. AHHHHH.....

[evert100 1]

Maybe this is something for you. I just made my first experience with it. But works great. Sorry i wasn't clear enough to you. The great thing is that it places extra body classes when viewed on a specific device. Looking in the source code of the plugin i found the classes. I cannot test on android and such ans user-agent-switcher aren't completely accurate.... Good luck!

[evert100 1]

@WebWerx One more thing, try the fixed menu option. It looks better on mobile devices. Your menu is scaled down so everything comes on a second line etc. See http://edugram.nl

[WebWerx 0]

@evert100: Working on it -- just sent you a PM with some questions.

[WebWerx 0]

@evert100: Really have a look at Adobe Shadow. If you have a Mac you will be in Heaven (It's free)

[Jenny 33]

http://www.pagelines.com/tracking/wiki/Browserspecificcss%3AMainPage for some docs :)

[evert100 1]

@webwerx I installed adobe shadow (for windows) Awesome. This synchronisation up to 5 devices is amazing. For ipad i didn't install because pagelines is perfect for ipad. No browser-specific-css needed. I answered your PM. @simple_mama this link is very useful, thanks.

[WebWerx 0]

:-) Don't bring Jenny into this! ;-)

[Jenny 33]

haha :)

[WebWerx 0]

@simple_mama: There needs to be more info on doing device specific CSS with the Browser Specific CSS plugin.... Juts sayin'