Change Line Spacing Expanse Theme

[kittenslim]

I'd like to adjust the line spacing on the Collection Page in the Expanse Theme. On the mobile, there is too much space between the Header and subheader, and too much space between paragraphs.

On the desktop, there is too much space between the Header and the Banner photo. 

Can anyone give me guidance on how to adjust this?  Thanks!

The mobile page has too much s

[PageFly-Amelia]

Hi @kittenslim 

This is Amelia from PageFly - Landing Page Builder App

You can try this code by following these steps: 

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

Step 2: Search file components.css

Step 3: Paste the below code at bottom of the file -> Save

at-rte.at-rte.rte.clearfix.rte--collection-desc.enlarge-text {

    padding-top: 10px;

}

#shopify-section-template--17343934136501__main-collection section-main-content {

    padding: 0;

}

@media (max-width: 767px){

at-rte.at-rte.rte.clearfix.rte--collection-desc.enlarge-text>h3 {

    margin: 25px 0;

}}

Hope that my solution works for you.

Best regards,

Amelia | PageFly

[Tech_Coding]

Hello @kittenslim 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media only screen and (min-width: 768px) {
    #shopify-section-template--17343934136501__collection-header section-main-content {
         padding-top: 22px !important;
     }
     .rte--collection-desc {
         padding: 0 !important;
     }
}
@media screen and (max-width:767px)
    .rte--collection-desc h2, h3 {
        line-height: 23px !important;
        margin-bottom: 10px !important;
        margin-top: 10px !important;
    }
    .rte--collection-desc {
       padding: 23px 0 !important;
    }
}
</style>

Desktop Result:

Mobile Result:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[GTLOfficial]

Hello @kittenslim 
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->component.css
add this code at the end of the file.

@media only screen and (max-width: 769px) {
.footer__section {
padding: 0px !important;
}
.rte--collection-desc {
padding: 20px 0;
}
.rte h3, {
margin-top: 30px;
}
}
@media only screen and (min-width: 769px) {
section-main-content {
padding-top: 0px !important;
}
}

result

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