padding/spacing

Shopify Discussion

Topic summary

A user encountered a spacing/padding issue with the reviews section on mobile devices. While the desktop version displayed correctly, the mobile version lacked proper side spacing for TrustShop Reviews.

Solutions Provided:

Three community members offered CSS code solutions:

  • Solution 1: Add padding to .trustshop-review--body via theme.liquid file using media query for screens under 767px
  • Solution 2: Insert padding (20px left/right) to #trustshop-review in theme.scss.liquid
  • Solution 3: Modify trustshop-product-reviews.min.css by changing the width from 100% to 90% with !important flag for screens under 610px

Resolution:

The issue was successfully resolved. The user confirmed one of the solutions worked, though the specific solution used wasn’t explicitly identified. All approaches involved adding custom CSS through Shopify’s theme code editor to create proper mobile spacing.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

How can i add spacing/padding on the sides in the reveiws section in mobile version
on desktop it looks but on mobile version there’s no side spacing. Currently Using TrustShop Reviews.

Screenshot 2024-08-16 103931.png
Screenshot 2024-08-16 103931.png531×663 27.8 KB

1 Like
2

Hello @navdeeplaller

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

3

@navdeeplaller

Thank you for reaching out and posting this question!
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

HEllo @navdeeplaller
Please share your website URL and password

5

waggers.store

6

www.waggers.store

1 Like
7

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media (max-width: 767px) { .trustshop-layout-box--left .trustshop-review--body { padding:0 2rem !important; } }

niraj_patel_0-1723787485636.png
niraj_patel_0-1723787485636.png319×458 18.6 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
8

@navdeeplaller Thanks for ulr can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
#trustshop-review {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
1 Like
9

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->trustshop-product-reviews.min.css
search this code

@media (max-width: 610px) {
  .trustshop-layout-box--left .trustshop-review--body {
    width: 100%;
  }
}

and repalce with this code.

@media (max-width: 610px) {
  .trustshop-layout-box--left .trustshop-review--body {
    width: 90% !important;
  }
}

result

11.png
11.png390×747 31.6 KB

If this was helpful, hit the like button and accept the solution.
Thanks

10

it worked
thanks!

1 Like
11

@navdeeplaller wow that would be great thanks for update.

1 Like