Make separators full width in Shopify Prestige theme on mobile

[Issyeissue]

Does anyone know how to make the separators full width on mobile devices? (on the product page)

[BSS-TekLabs]

Hello @Issyeissue 
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

[Issyeissue]

leonisa.se

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @Issyeissue 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
@media only screen and (max-width: 750px) {
  .product-info__block-item[data-block-type="separator"]{
    margin: 1.5rem -20px !important;
  }
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[BSSCommerce-B2B]

@Issyeissue , Can you kindly share your store url and password?

[BSSCommerce-B2B]

@Issyeissue ,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
@media only screen and (max-width: 600px) {
  .product-info__block-item[data-block-type="separator"]{
     margin: auto -20px;
  }
}
</style>

Result:

[Sangeetanahar]

hello @Issyeissue 

It is working fine on my mobile, I checked it

thanks

[Made4uo-Ribe]

Hi @Issyeissue 

check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.container.container--lg {
    margin: 0;
}
.product-gallery {
    margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}
.product-info__block-item:not([data-block-type="separator"]) {
    margin-inline-start: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
    margin-inline-end: max(var(--container-gutter), 50% - var(--container-max-width) / 2);
}
.container.container--lg .product-gallery {
    margin-left: 30px;
    margin-right: 30px;
}
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!