How to make my product page full width on mobile version

Store Design
, ,
1

Hey,

We’re trying to make the product page full width (example 1), but for some reason can’t find the code used to do so despite already doing it in a previous website (example 2).

The idea is for it to have no margins whatsoever.

Thanks!

link: www.us-beforethem.com

password: usbeforethem

ExtraordinaryH_0-1736964635671.jpeg
ExtraordinaryH_0-1736964635671.jpeg943×2048 99.8 KB

ExtraordinaryH_1-1736964642546.jpeg
ExtraordinaryH_1-1736964642546.jpeg943×2048 104 KB

2

Hi @ExtraordinaryH

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (max-width: 768px){
media-gallery.product__column-sticky slider-component ul > li:nth-child(1) {
    margin-left: 0 !important;
}
media-gallery.product__column-sticky slider-component ul > li {
    width: 100% !important;
}
}

Here is the result:

image_480.png
image_480.png290×480 63.3 KB

I hope this helps

Best,

Daisy

3

Hey @DaisyVo !

We ended up fixing it yesterday by copying the base.css file from one store to the other.

But appreciate this nonetheless!