Reduce Padding (Pipeline Theme) on mobile

Technical Q&A
1

Hi,

I’ve been working on trying to reduce the padding on my store for mobile (ironsmithco.com) in two locations:

Product page - Between the product image and header

Cart Page - Between the last cart item and subtotal text

I’m on the newest version of the Pipeline theme. Has anyone else run into this issue and have a solution? Thank you!

-Chris

2

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

3

Hi Pallavi

Thank you for taking a look!

https://www.ironsmithco.com/products/leather-valet-tray

https://www.ironsmithco.com/cart

IMG_34006DA834D0-1.jpeg
IMG_34006DA834D0-1.jpeg1125×2436 184 KB

IMG_98770E9FF4B8-1.jpeg
IMG_98770E9FF4B8-1.jpeg1125×2436 109 KB

4

hello @Chris184 please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 769px) {
 #shopify-section-product .product-section .product-page{
    padding-top: 0 !important;
}
 #shopify-section-cart .cart  .wrapper form .cart__row  .grid .grid__item:nth-child(1){
     display:none;
 }
}
1 Like
5

Worked perfectly, Thank you so much!

6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media only screen and (max-width: 769px) {
#shopify-section-product .product-section .product-page{
padding-top: 0 !important;
}
#shopify-section-cart .cart .wrapper form .cart__row .grid .grid__item:nth-child(1){
display:none;
}
}
7

Kindly feel free to get back to me if you need any further assistance Thanks!