Re: How to reduce vertical spacing between two sections (Dawn 2.0)

Solved

How to reduce vertical spacing between two sections (Dawn 2.0)

hsellak
New Member
9 0 0

Hi all,

I noticed a huge vertical spacing between two consecutive Featured Products blocks! How I can reduce that and any spacing between consecutive sections?

Thanks.

Accepted Solution (1)
suyash1
Shopify Partner
9868 1227 1566

This is an accepted solution.

@hsellak- ok, lets put it in media query, remove those lines and add this

@media screen and (min-width:1025px){
#shopify-section-template--14152804401393__featured_products{margin-top: 0rem;}

#shopify-section-template--14152804401393__featured_products .title-wrapper-with-link
{margin: 0rem 0 3rem;}
}
To build shopify pages use pagefly | Contact me - [email protected] , My timezone is GMT+5:30. | Support me

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
9868 1227 1566

@hsellak- please share site URL

To build shopify pages use pagefly | Contact me - [email protected] , My timezone is GMT+5:30. | Support me

Zworthkey
Shopify Partner
5581 642 1577

Hii, @hsellak 
Kindly share your store URL so,
I can solve it perfectly.
Thank You.

hsellak
New Member
9 0 0

@suyash1 @Zworthkey : I apologise for the delayed reply. You'll notice some spacing above "Featured Products" (title), slightly better spacing above "Featured Collection".

Can you please help with these and in general how I can modify the spacing between the different sections.

Thanks.

suyash1
Shopify Partner
9868 1227 1566

@hsellak- add this css to the very end of your base.css file and check

#shopify-section-template--14152804401393__featured_products{margin-top: 0rem;}

#shopify-section-template--14152804401393__featured_products .title-wrapper-with-link
{margin: 0rem 0 3rem;}
To build shopify pages use pagefly | Contact me - [email protected] , My timezone is GMT+5:30. | Support me
hsellak
New Member
9 0 0

@suyash1  Hi Suyash, thanks this is working but there's one issue: this is affection the mobile display as I forgot to mention that the mobile version of store was looking good. How to limit this change to only Desktop.

Thanks.

suyash1
Shopify Partner
9868 1227 1566

This is an accepted solution.

@hsellak- ok, lets put it in media query, remove those lines and add this

@media screen and (min-width:1025px){
#shopify-section-template--14152804401393__featured_products{margin-top: 0rem;}

#shopify-section-template--14152804401393__featured_products .title-wrapper-with-link
{margin: 0rem 0 3rem;}
}
To build shopify pages use pagefly | Contact me - [email protected] , My timezone is GMT+5:30. | Support me