Dawn theme - Reduce blank space under Featured collection header

[Moujik]

Dears,

I’ve been looking for the solution to my problem for hours but everything I’ve tried doesn’t work.

On my homepage I would like to reduce the space between the heading of my Featured collections and the images below.

My url is : www.shkoonshop.com

Could you help me please?

Thank you!

[StudioEnchant · Accepted solution]

Hey @Moujik,

please note that the problem you are facing caused because of the product images that are too tall and are not centered. Fixing the images will resolve your problem.

[StudioEnchant · Accepted solution]

Hey @Moujik,

please note that the problem you are facing caused because of the product images that are too tall and are not centered. Fixing the images will resolve your problem.

[Moujik]

Thank you so much!

I had to change the Image ratio in the Featured collection/Product card section and it reduced the blank space.

Another (last?) question :

This time, how could I add blank space between the bottom of my Instagram Feed app and the heading of my Featured collection ??

There is no change when I edit the Top padding.

[StudioEnchant]

Use the following code:

#rap__med__instagram {
    margin-bottom: 2rem;
}

if we helped you please mark this reply as a solution!

[Moujik]

Where should I add this code please?

[StudioEnchant · Accepted solution]

Go to Online Store -> Themes -> Edit code, then go to the file called base.css and paste the code at bottom of it

[Moujik]

Got it! It works! Thank you so much.

[PageFly-Henry]

HI @Moujik 

This is Henry 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 component-card.css

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

.collection__title.title-wrapper, title-wrapper-with-link  {

    margin-bottom: 0 !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[StudioEnchant]

Hey,

You can paste the following code to the bottom of your base.css file:

.collection__title.title-wrapper {
    margin-bottom: -2rem;
}

Note that this is NOT the optimal solution, and the best solution is fixing the pictures, as we mentioned before.