Goal: reduce the side margins (make containers nearly edge-to-edge) for the product description on mobile in Shopify’s Dawn theme. An image is provided to illustrate the wide margins.
Suggested fix: add a mobile CSS rule in assets/section-collection-list.css targeting .collection-list-wrapper.page-width to set padding: 10px and width: 100% for screens ≤749px (via a @media query).
Result: the change had no effect. The requester also tried similar edits in base.css and section-main-product.css without success.
Key terms:
Status: unresolved. Next step needed is identifying the correct file and CSS selector controlling the product page’s mobile container/margins. The attached image is central to understanding the desired visual outcome.
Hello!
It should be easy, but I can’t find the code…
How to make the containers on the sides of the product description smaller in MOBILE VERSION in Dawn Theme? They are too wide for me. I want to make it almost edge to edge, at least 50% smaller.
The picture is showing what I mean:
@Maro33 go to assets/section-collection-list.css ->paste below code at the bottom of the file.
@media screen and (max-width: 749px){
.collection-list-wrapper.page-width {
padding: 10px !important;
width: 100%;
}
}
@DelightCart I have done it, but it doesn’t change anything…
Tried even on base.css and section-main-product.css