Hello,
I have been going at this for hours and can’t seem to figure it out. I have this custom CSS for the media gallery to be full width, etc., etc., but on mobile, the padding is, like, 0rem, edge-to-edge, which I don’t like, but I DO like, that the media gallery is edge-to-edge. How can I get the page, just for mobile, to not be 0 padding? It’s touching the edge of the screen too much.
My code:
.product__media-list.grid {
row-gap: 0;
column-gap: 0;
}
.product--stacked .product__media-item {
max-width: 100% !important;
width: 100%;
margin: 0 auto; /* Center images */
}
.product-media-container.media-fit-cover {
border: 0 !important;
}
.page-width:has(.product) {
max-width: 100%;
padding: 0 !important;
} /* Mobile-specific adjustments */
@media (max-width: 767px) {
.product__media-item {
width: 100vw !important; /* Full viewport width for mobile */
max-width: 100vw !important;
} /* Prevent any horizontal scrolling */
body,
html {
overflow-x: hidden; /* Disable horizontal scroll */
width: 100%; /* Ensure body and HTML don't exceed viewport */
margin: 0;
padding: 0;
} /* Ensure the page content doesn't overflow */
.page-width {
max-width: 100vw !important;
overflow-x: hidden;
}
}
Example of what it looks like:
Additional information: I am using the Dawn theme, if that helps at all.
Thank you!