I’m trying to center a 2×3 grid of images & text and although it works on desktop, it has a seemingly weird offset on mobile. For example, here’s how it looks on desktop:
and here’s the layout on mobile:
The HTML section is defined as follows:
<div class="row" id="selected-works-section">
<h1>Selected Works</h1>
<div class="col-lg-12">
<div id="selected-works-grid" class="container-fluid">
<div class="row">
<div
class="selected-works-grid-item col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
<img
src="/assets/images/belden_suites.jpg"
alt="belden suites"
class="img-fluid mx-auto d-block"
/>
<div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
<h6>BELDEN SUITES</h6>
<p>Creative direction and execution, 2015</p>
</div>
</div>
<div
class="selected-works-grid-item col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
<img
src="/assets/images/camies_kitchen.jpg"
alt="camie's kitchen"
class="img-fluid mx-auto d-block"
/>
<div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
<h6>CAMIE'S KITCHEN</h6>
<p>Concept and design, 2018</p>
</div>
</div>
<div
class="selected-works-grid-item col-lg-4 col-md-4 col-sm-12 col-xs-12"
>
<img
src="/assets/images/fairhill_hall.jpg"
alt="fairhill hall"
class="img-fluid mx-auto d-block"
/>
<div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
<h6>FAIRHILL HALL</h6>
<p>Concept and rendering, 2013</p>
</div>
</div>
</div>
<div class="row">
<div
class="selected-works-grid-item col-lg-4 col-md-6 col-sm-12 col-xs-12"
>
<img
src="/assets/images/gaels_restaurant.jpg"
alt="gael's restaurant"
class="img-fluid mx-auto d-block"
/>
<div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
<h6>GAEL'S RESTAURANT</h6>
<p>Concept, rendering and execution, 2015</p>
</div>
</div>
<div
class="selected-works-grid-item col-lg-4 col-md-4 col-sm-12 col-xs-12"
>
<img
src="/assets/images/guajardo_residence.jpg"
alt="guajardo residence"
class="img-fluid mx-auto d-block"
/>
<div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
<h6>GUAJARDO RESIDENCE</h6>
<p>Concept, rendering and execution, 2025</p>
</div>
</div>
<div
class="selected-works-grid-item col-lg-4 col-md-4 col-sm-12 col-xs-12"
>
<img
src="/assets/images/newark_residence.jpg"
alt="newark residence"
class="img-fluid mx-auto d-block"
/>
<div class="selected-works-grid-item-text col-lg-8 offset-xl-2">
<h6>NEWARK RESIDENCE</h6>
<p>Concept, rendering and execution, 2020</p>
</div>
</div>
</div>
</div>
</div>
</div>
and here’s the custom css code:
/* selected works section */
.selected-works-grid-item > img {
max-width: 350px;
max-height: 200px;
}
.selected-works-grid-item-text > h6 {
margin-top: 20px;
font-weight: bolder;
}
What could be causing this offset on mobile? I tried various combinations of col-md-X values and using the mx-auto & d-block classes without img-fluid but to no avail.
2
Answers
d-flex flex-column align-items-center justify-content-center is used to center elements.
Like the other answers and comments, I was not able to duplicate the offset on mobile. It’s best to use StackOverflow’s code snippet function to include a working example of your code with the problem, rather than using a screen capture.
Your screen capture seems to show a horizontal scrollbar, indicating your page is wider than the viewport. That may be because you don’t have your first row inside a container.
You’re defining your image sizes using pixels, but Bootstrap uses percentages. It may be better to use the img-fluid class, rather than overriding those values.
For your item text, you’re defining a column inside of a column with no containing row div. I don’t think that’s causing the mobile offset problem, but it might be good to add a row div.
As @tdy pointed out, having all six columns in one row would work nicely.
I stayed with your 350px wide image size, so the images won’t fill the columns. You could use a larger image (e.g. 700px wide), which would fill the column widths. If you do that, you might want to change the offset value for the item-text.