Solved

Seperate padding for desktop and mobile on product page main section

usmekhan91
Shopify Partner
33 0 7

Hi Shopify community,

 

I am unable to change padding for product main section in my shopify store. When i am changing padding it is changing in both mobile and desktop but i wanted to do different padding on mobile and desktop. I am using below mentioned code in custom css section in theme customized but still unable to fix this issue

/* Mobile */
.t4s-product {
  padding-right: 0px;
  padding-left: 0px;
} /* Tablet */
@media (min-width: 600px) {
  .container {
    padding: 20px;
  }
} /* Desktop */
@media (min-width: 900px) {
  .t4s-product {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 50px;
  }
}

 

I would appreciate if any one can help me in this regards.

 

 

Website URL: https://9v0hbpaqs1hfmt9p-61554688170.shopifypreview.com/products/super-iron-supplement

 

usmekhan91_0-1701247997002.png

 

Accepted Solutions (2)

Dan-From-Ryviu
Shopify Partner
7011 1327 1352

This is an accepted solution.

Hi @usmekhan91 

Please try to update code to this 

 

/* Mobile */
@media (max-width: 600px){
.t4s-product {
  padding-right: 0px;
  padding-left: 0px;
} 
}
/* Tablet */
@media (min-width: 600px) {
  .container {
    padding: 20px;
  }
} 
/* Desktop */
@media (min-width: 900px) {
  .t4s-product {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 50px;
  }
}

But I have checked and saw those css code is applied for sections that does not have any content 

Screenshot 2023-11-29 at 16.08.28.png

 

 

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Made4uo-Ribe
Shopify Partner
5127 1223 1497

This is an accepted solution.

Hi @usmekhan91 

Check this one. 

 

@media only screen and (min-width: 900px){
.t4s-container.t4s-main-product__content.is--layout_default.t4s-product-media__thumbnails_bottom.t4s-product-thumb-size__small {
  padding: 50px 30px;
  margin: 50px;
  }
}
@media only screen and (min-width: 599px) and (max-width: 899px) {
  .t4s-container.t4s-main-product__content.is--layout_default.t4s-product-media__thumbnails_bottom.t4s-product-thumb-size__small {
    padding: 20px;
  }
}
@media only screen and (max-width: 600px){
.t4s-container.t4s-main-product__content.is--layout_default.t4s-product-media__thumbnails_bottom.t4s-product-thumb-size__small {
    padding: 0px;
  }
}

 

And Save. 

Better to be specific selector, cause you may call another container.

Result:

Made4uoRibe_0-1701250210729.pngMade4uoRibe_1-1701250301337.png

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
7011 1327 1352

This is an accepted solution.

Hi @usmekhan91 

Please try to update code to this 

 

/* Mobile */
@media (max-width: 600px){
.t4s-product {
  padding-right: 0px;
  padding-left: 0px;
} 
}
/* Tablet */
@media (min-width: 600px) {
  .container {
    padding: 20px;
  }
} 
/* Desktop */
@media (min-width: 900px) {
  .t4s-product {
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin: 50px;
  }
}

But I have checked and saw those css code is applied for sections that does not have any content 

Screenshot 2023-11-29 at 16.08.28.png

 

 

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

usmekhan91
Shopify Partner
33 0 7

Thanks buddy! worked

Dan-From-Ryviu
Shopify Partner
7011 1327 1352

Happy I could help 😊

Best Regards,

Dan from Ryviu - Product Reviews & QA

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Made4uo-Ribe
Shopify Partner
5127 1223 1497

This is an accepted solution.

Hi @usmekhan91 

Check this one. 

 

@media only screen and (min-width: 900px){
.t4s-container.t4s-main-product__content.is--layout_default.t4s-product-media__thumbnails_bottom.t4s-product-thumb-size__small {
  padding: 50px 30px;
  margin: 50px;
  }
}
@media only screen and (min-width: 599px) and (max-width: 899px) {
  .t4s-container.t4s-main-product__content.is--layout_default.t4s-product-media__thumbnails_bottom.t4s-product-thumb-size__small {
    padding: 20px;
  }
}
@media only screen and (max-width: 600px){
.t4s-container.t4s-main-product__content.is--layout_default.t4s-product-media__thumbnails_bottom.t4s-product-thumb-size__small {
    padding: 0px;
  }
}

 

And Save. 

Better to be specific selector, cause you may call another container.

Result:

Made4uoRibe_0-1701250210729.pngMade4uoRibe_1-1701250301337.png

 

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

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com