How to apply custom CSS padding rule only to desktop?

Store Design
1

Hi,

For my webshop, I’m trying to adjust the padding of my shopify reviews on the product pages for the desktop version of the site, for which I added the following code to my theme.scss.liquid file:

#shopify-product-reviews > div {
padding-left: 150px;
padding-right: 150px;
}

However, I want this padding to only be applied on the desktop website version, and not on the mobile version (where I don’t want any padding at all). What should I add to the code in order for it to NOT apply on mobile but only on desktop?

Thank you in advance.

Kr,

Mathias

2

Use with media query

@media screen and (min-width: 900px) {
#shopify-product-reviews > div {
    padding-left: 150px;
  padding-right: 150px;
}
}
1 Like
3

@Guleria Cheers! That worked smoothly