How to change the width of the reviews section on MOBILE

[CreatorTim]

Hi, how can I change the width of the reviews section on mobile?

Here’s how it looks on my store:

And I want it to look like this:

So simply, I don't want it to span across the entire screen.

 

Here’s a link to a store that looks the way I want it to: https://tomnoske.store/

(Just scroll down, it's there.)

And here’s my store: https://1049xn-ya.myshopify.com/ 

(Just scroll down, it's there.)

As I mentioned, I want this change only for mobile, I want to keep it as it is on desktop.

Thanks a lot!

Tim

[DaisyVo]

Hi @CreatorTim 

The review section code appears to come from an application or a JavaScript snippet. Typically, code located within the #shadow-root (open) element cannot be styled directly with CSS.

If this code originates from an app, you may need to contact the app provider for assistance in customizing the CSS. Alternatively, if the code was manually added, you might need to hire a theme developer to review and customize your theme, as this is beyond the scope of our support.

Thank you for your understanding!

[CreatorTim]

Thans for the feedback brother.

[Farhan3 · Accepted solution]

Hi @CreatorTim,

Try these steps:

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on the "3 dots button" on the left side of "Customize" button and then click on "Edit code".
3. On the left side, in the "Assets" folder, click on "base.css" file, now at the bottom of the file, add the following CSS code:

   @media screen and (max-width: 767px) {
   #shopify-section-template--22711083729161__custom_liquid_wTxmeQ .custom-liquid-section {
     padding: 0 20px;
   }
   }

If this helped solve your issue, a Like and Accept as Solution would mean the world to me! ❤️ If you'd like to go the extra mile, your kind Coffee Tips keep my creativity and dedication brewing! ☕ Cheers to creating awesome Shopify solutions together! 🚀

[CreatorTim]

Thank you!

[Dan-From-Ryviu]

Hi @CreatorTim 

Please add this code to Custom CSS in Online store > Themes > Customize > Theme settings 

@media (max-width: 749px) {
#shopify-section-template--22711083729161__custom_liquid_wTxmeQ .custom-liquid-section {
    padding: 0 20px;
}
}

[CreatorTim]

Thank you! Works