CODEWITHSUNDEEP
csstwitter-bootstrap
prismspecs
prismspecs

Reputation: 1489

Photo gallery image margins

I'm trying to make a site for my new documentary and have found Bootstrap to be very helpful but I'm running into a bit of a problem:

I have 12 images, I'd like them to be arranged into 3 rows of 4, but make sure that with smaller screens this works out, so maybe on a mobile device it is only 1 image per column (or two).

Here is the site as is (no margins) http://athomewhileaway.org/gallery.html

Any ideas? Thanks...

Upvotes: 0

Views: 172

Answers (2)

Niket Thapa
Niket Thapa

Reputation: 305

Please try this one

HTML

<div class="row no-gutter">
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
        <img src="" alt="">
    </div>
</div>

if you need one photo in small screen then you can remove col-xs-6 class from related div

CSS

.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

This CSS property needs to remove space between the columns (Twitter Bootstrap set gutter width in default).

Thanks!

Upvotes: 1

plushyObject
plushyObject

Reputation: 1131

Note the xs (extra small) and sm (small) You can use the .col-xs-6 (row of 2) or .col-xs-12 (single colum) for phones, and .col-sm-6/.col-sm-12 for tablet, up to 768px, I believe. If you provide a fiddle I will hook you up with a better solution. Learn more here.

On extra small devices (most phones):

<div class="container">
    <div class="row">
       <div class="col-xs-6">
             #Your Stuff
       </div>
       <div class="col-xs-6">
             #Your Stuff
       </div>
    </div>
</div>

Upvotes: 1

Related Questions