Correctly switch between 2 Column and 1 Column grid on iPhone Landscape/Portrait mode

I had been designing a website with 4 banner that each takes col-md-3 for desktop-sized screen and takes col-xs-12 on portrait mode on the iPhone.

//screenshot will be added in a short moment.

It turned out that it looks horrible on landscape mode as the banner are over-stretched. In this post, with the help of xander, we had managed to successfully put up 2 column of grid on the landscape mode. The main issue here is that on the landscape mode, the iphone will only use c0l-xs as such we have to force it to use col-sm.

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 568px) {
.col-sm-6 {
float: left;
width: 50%;
This entry was posted in Web Development and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s