Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!

How do I reduce space between title and text (landing page) ? Dawn Theme

JustInCase-de
Excursionist
65 0 2

Hello,

I want to find out, how to reduce the spacing between the Title "Our Bestsellers" and the text beneath. 

I had previously asked the same question, but the code provided doesn't work anymore (the code is still present within the theme).

The Text and title should be much closer, to achieve a neater look.

I am using the Dawn theme and this is my store url: justincase-de.com

Kind regards.

 

Bildschirmfoto 2023-01-25 um 13.29.03.png

Replies 7 (7)
shubhamSharma
Shopify Partner
111 22 24

hi  @JustInCase-de 

1. Go to your Store > Theme > click to edit code.
2. find this file "base.css " and open.

step 02:
1. Paste the code at the end of the file.

.isolate .rich-text.content-container .rich-text__text.rte {
    margin-top: 0 !important;
}
.isolate h2.rich-text__heading.rte.h0 {
    line-height: 60px !important;
}

this idea helps you

amanbatra
Shopify Partner
89 13 12

Hello @JustInCase-de 

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

Is the solution works for you ? please Like and Accept Solution.
Need more help with theme customization and store development ?
WA: +917508271396, Email: amanbatra.developer@gmail.com, Skype: amanbatra.developer
PageFly-Victor
Shopify Partner
5684 1011 2355

Hi @JustInCase-de 

 

You can try this code by following these steps:

Go to Online store => themes => actions => edit code  and add this code on file theme.liquid before tag </body>

 

PageFlyVictor_0-1674653751876.png

 

<style>

@media screen and (min-width: 767px){

.section-template--17073459167496__rich_text-padding {

    padding-top: 40px;
}
}

.isolate .rich-text.content-container .rich-text__text.rte {

    margin-top: 0 !important;

}

.isolate h2.rich-text__heading.rte.h0 {

    line-height: 60px !important;

}

</style>

 

Hope this answer helps.

Best regards,

Victor | PageFly

If it’s helpful for you, please let me know by giving it a like or marking it as a solution!


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


All features are available from Free plan. Let’s create unique website design with PageFly here.


Shopify Invoice Generator by PageFly – Try It Free!.

JustInCase-de
Excursionist
65 0 2

Thank you very much.

That worked!

 

Kind regards,

JustInCase

JustInCase-de
Excursionist
65 0 2

Sorry, after reviewing the website again, I've seen the code works for the desktop version, but messes up the mobile version.

This is how it currently looks like: 

https://suiyijahiuvcktcj-64572260616.shopifypreview.com/ (I also tried the code provided by you, which gave me the same outcome as seen on picture).

63565FCD-76C2-40B4-AB0D-491CA86B4107.png

JustInCase-de
Excursionist
65 0 2

Hello,

thank you for your efforts!

Unfortunately that only worked for the desktop version, but totally messed up the mobile store version (view picture).

I am using the Dawn theme and this is the link to my theme copy, with the code applied: 

https://suiyijahiuvcktcj-64572260616.shopifypreview.com/

 

F2CC7F6C-5336-4C74-94CA-620DE9D0B120.png

PageFly-Victor
Shopify Partner
5684 1011 2355

 

Please help me to remove old code and add new code to theme.liquid

<style>

@media screen and (min-width: 1024px){

.section-template--17073459167496__rich_text-padding {

padding-top: 40px;
}
}

.isolate .rich-text.content-container .rich-text__text.rte {

margin-top: 0 !important;

}

.isolate h2.rich-text__heading.rte.h0 {

line-height: 60px !important;

}

</style>

 

If it’s helpful for you, please let me know by giving it a like or marking it as a solution!


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


All features are available from Free plan. Let’s create unique website design with PageFly here.


Shopify Invoice Generator by PageFly – Try It Free!.