I've encountered an issue where my 2×3 grid of images and text is perfectly centered on desktop but has a strange offset on mobile devices. Here's how it appears on the desktop:
https://i.sstatic.net/HXqFq.jpg
and here's the layout on mobile:
https://i.sstatic.net/kKkhs.png
The structure of the HTML section is 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">
- The rest of the HTML content remains unchanged from the original post -
</div>
</div>
</div>
In addition to that, here's the custom CSS code utilized for styling:
/* 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;
}
Despite my attempts with different column values like col-md-X and playing around with classes such as mx-auto and d-block, I haven't been able to resolve this offset discrepancy on mobile. Any insights into what might be causing this issue?