Issue: Facing trouble centering my product grid under 576px.
Question: How can I adjust the CSS to ensure the products are centered under 576px?
My goal is to have the products centered when the screen size is under 768px, particularly for mobile devices where the images are resized to fit two per row but are currently aligned slightly to the left.
Here is the HTML code snippet:
<div class="right">
<div class="center">
<h1>Talent</h1>
</div>
<div class="product-">
<% @listings.each do |listing| %>
<div class="image-circle">
<div class="listing-page-images" id="listing-image-resize">
<%= link_to image_tag(listing.image_url(:listing_index_4), id: "listing-image-resize-2"), listing, id: "listing-image-resize", data: {id: listing.id, name: listing.name} %>
</div>
<div class="text-over">
<p><%= link_to listing.user.name, listing, id: "" %></p>
</div>
</div>
<% end %>
</div>
</div>
CSS style:
.right {
flex: 70%;
padding: 15px;
padding-top: 20px;
font-family: Helvetica, sans-serif ;
font-weight: 600 ;
}
.product- {
padding-top: 30px;
display: flex;
flex-wrap: wrap;
}
@media only screen and (max-width: 576px) {
#listing-image-resize {
width: 100px !important;
height: 150px !important;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 100%;
max-height: 100%;
}
#listing-image-resize-2 {
position: absolute;
width: 100px !important;
height: 150px !important;
top: 50%;
left: 50%;
max-width: 100%;
max-height: 100%;
}
}
One observation I've made is that between 768px and 576px, the products are centered on the page without needing the @media 576px CSS rule.
I am using Bootstrap 4 and suspect it might automatically handle the centering within that screen size range, but I have not found clear information on this behavior within the body tag that lacks @media CSS rules.