Bootstrap Grid Layout on Mobile Devices

Question

I am trying to create a Bootstrap grid layout with different images. Everything is fine except when viewing on different mobile devices in the mobile inspector on Chrome. Below is a picture of what it looks like in the inspector. The second image is slightly off-centered from the former image.

<section class="container" id="main">
<section class="center-block text-center">
    <h4>Random Column Number 1</h4>
    <img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201701231950" width="500px" height="262px"/>
</section>
<section class="col-lg-6 center-block text-center">
    <h4>Random Column Number 2</h4>
    <img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" width="500px" height="262px" />
</section>
<section class="col-lg-6 center-block text-center">
<h4>Random Column Number 3</h4>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" width="500px" height="262px" />
  </section>
</section>

Here is the JSFiddle. The problem is that I am trying to off-set the second section as a "col-lg-6 center-block text-center" class. If I remove the col-lg-6 it works just fine. But I want to be able to stack two images next to each other. Is there any way to correct this so that it is centered like the first image? The JSFiddle contains three images.

This is what it looks like at full screen.

score 1 · Accepted Answer · answered Mar 08 '17 at 11:46

1

The images are not the correct aspect ratio because of the force width and height set. Perhaps just set a max-height so they image width can change responsively.

Also, center-block should be used on the images instead of the col-

<section class="container" id="main">
  <section class="center-block text-center">
    <h4>Random Column Number 1</h4>
    <img src="https://www.apple.com/ac/structured-data/images/open_graph_logo.png?201701231950" class="center-block img-responsive" />
  </section>
  <section class="col-lg-6 text-center">
    <h4>Random Column Number 2</h4>
    <img src="http://www.appliste.cz/wp-content/uploads/2016/05/Apple_1998.png" class="center-block img-responsive" />
  </section>
  <section class="col-lg-6 center-block text-center">
    <h4>Random Column Number 3</h4>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Apple_Computer_Logo_rainbow.svg/931px-Apple_Computer_Logo_rainbow.svg.png" class="center-block img-responsive" />
  </section>
</section>

http://www.codeply.com/go/JBhTWnvfv5

answered Mar 08 '17 at 11:46

Carol Skelly

351,302
90
710
624

This does work, yes, but I would like to keep the images the same size if possible. – Mar 08 '17 at 11:50
The first image is larger than the others because it is not restricted to a column size. – Mar 08 '17 at 12:00
You can still set width/height on the img, they'll just be out of proportion. The centering issue was due to `center-block` not being on the image. – Carol Skelly Mar 08 '17 at 12:03
Removing the image-responsive tag resets it back to the way it was. I left the `center-block` tag. – Mar 08 '17 at 12:21
The `col-lg-6 center-block` tag is what is causing the problem, but I want to keep it for the full screen layout. – Mar 08 '17 at 12:25

Ch UmarJamil · Answer 2 · 2017-03-08T11:58:03.440

0

<div class="col-sm-3">....</div>

....

use this code in your div where you are placing your grid and and div with these classes as i mentioned above. It works

edited Mar 08 '17 at 11:58

answered Mar 08 '17 at 11:37

Ch UmarJamil

167
1
14

That does not fix the issue. It is still off-center in the inspector. I am doing . – Mar 08 '17 at 11:46
As i said use this in div not in the section. Then you will see your problem will be solved – Ch UmarJamil Mar 08 '17 at 11:57
That helps but it is forcing all of the images too far to the right rather than centering them. – Mar 08 '17 at 12:00
Make another div which will be blank add this div to that and in parent div add class="center". you will get rid of this problem. – Ch UmarJamil Mar 08 '17 at 12:01
Should it look like this?
...
– Mar 08 '17 at 12:03
Nope instead of using section make that to div and also close all the div in the end. – Ch UmarJamil Mar 08 '17 at 12:04
The distinction between div and section does not matter. It does the same thing. – Mar 08 '17 at 12:11
But seeing your requirements it should be in div to use bootstrap grid layout – Ch UmarJamil Mar 08 '17 at 12:12

score 0 · Answer 3 · answered Mar 08 '17 at 11:49

0

Just add a media query when on mobile devices.

It would look something like this:

 @media screen and (max-width: 720px) {
   .center-block {
        padding:0 !important;
   }
 }

Fiddle

answered Mar 08 '17 at 11:49

Arjan Knol

942
5
20

Bootstrap Grid Layout on Mobile Devices

3 Answers3