Reduce padding above product title on mobile - Dawn theme

[MelissaG85]

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. 

[LizHoang]

Hi @MelissaG85 

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

[MelissaG85]

Here's the link Baby Sleep Program 

[LizHoang]

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;
}
}

[BSSCommerce-B2B]

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
.product__info-wrapper .product__title {
  margin-top: 0!important
}
</style>

Result:

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

Best Regards 😊

[MelissaG85]

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

[Rahul_dhiman]

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

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

[MelissaG85]

this didn't work? see screenshot 

[Guleria]

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

[VipulBudhiraja]

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!