How To Make iPhone6 Plus Landscape Mode Work Better with Bootstrap3?


Tags: css,iphone,ipad,twitter-bootstrap-3,landscape

Problem :

I noticed an odd problem with iPhone6 Plus in Landscape Mode and Bootstrap3 with its media queries. Basically, there's almost enough space on the iPhone6 plus in Landscape Mode to make it act like a tablet iPad in Portrait Mode.

The iPhone6 Plus Landscape Mode has a pixel width of 736px. The iPad Portrait Mode has a pixel width of 768px.

When trying to do grid styling with Bootstrap3, the col-sm-* works only for 750px and up. So, you can capture the iPad Portrait Mode and make it work well with that class. However, it doesn't work well with iPhone6 Plus Landscape Mode.

How can I override Bootstrap 3 so that col-sm-* CSS class works for 736px and up, fixing both container and container-fluid width and column width? The end goal would be to allow iPhone6 Plus Landscape Mode to act more like the iPad Portrait Mode.



Solution :

Unless someone can come up with a better answer, what I'm having to do is create a media query just for the iPhone6 Plus in Landscape Mode, and fix issues.

/* iPhone6 Plus Landscape Mode Fixes */
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) {
/* FIXES GO HERE */
}

A more desirable answer would be to adjust .container, .container-fluid, and .col-sm-*, perhaps.


    CSS Howto..

    javascript - how to get date locale to work?

    How to put a background image on a site

    How should I start to learn JavaScript, jQuery, etc.? My programming knowledge is zero [closed]

    YUI Calendar: how does it load the Sam's Skin CSS?

    CSS Help - How can a DIV ignore css previously set on the page?

    How to add html special character (right-arrow) using content property of css? [duplicate]

    How to make fonts display on web cross-platform?

    How to fit your website for all or at lest most screen resolutions?

    How to create a simple social sharing dropdown menu in CSS/HTML

    How can I use JQuery toggle for multile DIVs?

    How to place an HTML element over another using CSS

    How to change the css of color of select2 tags?

    How do I set my ul's margin after setting every padding and margin to zero in CSS? [closed]

    How to write conditional css?

    How can I vertically align a font-awesome input checkbox with its label?

    How do I add another tab using CSS3? Noy Hadar

    How to get CSS Variables working in Dart

    How to change content of a div by clicking a button outside the div?

    How to use metro css with codeigniter?

    How to emulate Google greyed-out suggested text in input element?

    How to set overlay on a page according to page height using CSS

    How to set textbox width fit in table cell CSS

    How to align the wizard to the left and right sides?

    How to update CSS to values that were chosen in a form? (jQuery)

    html, css - cursor - how to change default image for pointer

    How to align a background image to bottom of table cells in css?

    Show image when hovering on a span

    css 3d perspective not showing up correctly in certain browsers

    How do I auto play my slideshow

    how to really include html codes inside php