Bootstrap and phone orientation - not switching from col-xs-6 to col-sm-4

Report · Jun 16, 2017

I am using the default bootstrap in DW CC 2017,

I am testing it with my phone whose resolution is: 540 pixels by 960 pixels.

When i hold the phone vertically col-xs-6 presents 2 thumbs across the screen

The problem is that when i turn the phone horizontally, it dose not switch to col-sm-4 and instead of 4 thumbs i get 2 large ones.

Why is that and how to fix this?

I use the default breakpoints:

1200, 992 & 768px

my basic code structure is:

<h2>Thumb1</h2>

<p>This is a smaple text</p>

</div>

</article>

<h2>Thumb1</h2>

<p>This is a smaple text</p>

</div>

</article>

<h2>Thumb1</h2>

<p>This is a smaple text</p>

</div>

</article>

</div>

</section>

</div>

Report · Jun 16, 2017

Maybe because of the col-offset, I don't know.

A URL to your online site would be more helpful so we could see what you're working with.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 16, 2017

thank you,

i do not have a site with bootstrap yet - this is what i am working on now...

But you think that it should work, correct?

I removed the offset and it is still not working

Report · Jun 16, 2017

I think it may suit you to change the grid breakpoints. Have a look at using BootEditor | The Best Bootstrap Style Builder Software Ever

Wappler, the only real Dreamweaver alternative.

Report · Jun 17, 2017

Thanks,

What breakpoints do you recommend?

Do you think that has anything to do with it? i doubt.

Report · Jun 17, 2017

I use the standard breakpoints, but added an extra ms breakpoint for small mobiles held in portrait. Unfortunately the code has been written in Sass which is probably outside of your cope. See bootstrap_ms.css.scss · GitHub

In your case I would start a test project with the standard breakpoints and adjust when necessary.

Wappler, the only real Dreamweaver alternative.

Bootstrap and phone orientation - not switching from col-xs-6 to col-sm-4

1 Correct answer