• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Engaged ,
Jun 16, 2017 Jun 16, 2017

Copy link to clipboard

Copied

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:

<div class="container-fluid">

  <section  class="row">

    <div class="col-lg-offset-1 col-lg-10">

         <div class="row">

           <article class="col-xs-6 col-sm-4 col-md-3">

              <div><a href="#" class="thumbnail"><img src="#"  alt=""/></a>

               <h2>Thumb1</h2>

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

              </div>

           </article>

           <article class="col-xs-6 col-sm-4 col-md-3">

              <div><a href="#" class="thumbnail"><img src="#"  alt=""/></a>

               <h2>Thumb1</h2>

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

              </div>

           </article>

           <article class="col-xs-6 col-sm-4 col-md-3">

              <div><a href="#" class="thumbnail"><img src="#"  alt=""/></a>

               <h2>Thumb1</h2>

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

              </div>

           </article>

        </div>

       </div>

     </section>

</div>

Views

691

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jun 16, 2017 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

Votes

Translate

Translate
Community Expert ,
Jun 16, 2017 Jun 16, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 16, 2017 Jun 16, 2017

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 16, 2017 Jun 16, 2017

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 17, 2017 Jun 17, 2017

Copy link to clipboard

Copied

Thanks,

What breakpoints do you recommend?

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jun 17, 2017 Jun 17, 2017

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines