mobile padding

[mOONbOOTS]

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!

[Moeed]

Hey @mOONbOOTS 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Made4uo-Ribe]

Hi @mOONbOOTS 

Would you mind sharing your store URL? Thanks!