Reduce padding above product title on mobile - Dawn theme

Store Design
, ,
1

Hi I’m trying to work out how to reduce the padding between the product image and the product title in the dawn theme on mobile.

2

Hi @MelissaG85

Can you share with me your store link? I will help you with it

3

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above

Result:

BSSCommerceB2B_0-1730542290032.png
BSSCommerceB2B_0-1730542290032.png785×1069 279 KB

If it helps you, please like and mark it as the solution.

Best Regards :blush:

4

Here’s the link Baby Sleep Program

5

Thank you, but it doesn’t look like it made much of a difference. Maybe it’s the image padding that I need to change

6

Hello @MelissaG85
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-main-product.css
add this code at the end of the file and save.

.product_title {
margin-top: 0px !important;
}

result

47.png
47.png424×520 107 KB

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

7

this didn’t work? see screenshot

IMG_0140.PNG
IMG_0140.PNG1170×2532 258 KB

8

Hello @MelissaG85 ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code at the bottom:

@media screen and (max-width: 767px) {
.product .slider-button { 
    height: auto !important;
}
.product__text.caption-with-letter-spacing + .product__title {
    margin-top: 0 !important;
}
}

Thanks

9

Hi @MelissaG85

You can try the instruction here :

  1. Go to Shopify > Theme > customize > Custom CSS

  2. Copy and paste the code below > save

@media screen and (max-width: 768px){
.grid__item.product__media-wrapper slider-component.slider-mobile-gutter .slider-buttons {
    margin-block: -10px !important;
}
.product__info-wrapper.grid__item {
    margin-top: -10px !important;
}
}
10

To reduce the padding between the product image and the product title on mobile in the Dawn theme, you can add custom CSS to target this spacing specifically for mobile devices.

Here’s how to do it:

  1. Access Your Theme’s CSS:

    • Go to Online Store > Themes in your Shopify admin.
    • Click Actions > Edit code on the Dawn theme.
    • Open the main CSS file, typically named base.css or theme.css.

  2. Add Custom CSS for Mobile Padding:

    • Scroll to the bottom of the file and add the following code. This will target mobile screens and adjust the spacing between the image and title:

      css

      Copy code

      @media only screen and (max-width: 768px) { .product__image-wrapper { margin-bottom: 10px; /* Adjust this value to reduce or increase the space / } .product__title { margin-top: 5px; / Adjust this if needed to control spacing above the title */ } }

    • Change the values as needed to get the exact spacing you want.

  3. Save and Preview:

    • Click Save, then preview your store on a mobile device to see the adjustments.

This should give you more control over the spacing on mobile, improving the layout for a tighter look.

Increase your conversion rate and enhance your user’s shopping experience with smart guidance from the Debales AI Chatbot on Shopify! Ready to assist users effortlessly—let’s chat!