Reduce space between menu & collage (dawn theme)

Store Design
1

Hello,

we have a huge blank space (both on desktop and mobile) between the menu and the collage section. We would like to reduce it. I have managed to change it in the dev tool of chrome by adding margin top 0px but I don’t manage to find where to edit it in the Dawn theme code.

Here is what I edited in the dev tool :

kopajoy.fr

Thanks in advance

1 Like
2

@marion1234 Go to assetes/base.css and past below css at bottom of file.

.element-margin, .spaced-section
{
margin-top: 0px !important;
}
3

Thanks. I have just tried but it’s not working :disappointed_face:

1 Like
4 
@media screen and (min-width: 1200px){
#shopify-section-template--15609243140355__16457992856262b06e {
    margin-top: -60px!important;
}
}

@marion1234
Add this code in the bottom of the base.css file.

5

Thank you ! it works great on desktop but not on smartphone. How could I achieve the same on smartphone ?

1 Like
6 
#shopify-section-template--15609243140355__16457992856262b06e {
    margin-top: -60px!important;
}

try only these

7

Thanks for your help :slightly_smiling_face:

It works ok for desktop

but nok on smartphone as the top of the collage is cropped.

In the meantime I reverted back to the 1st solution you gave us :

@media screen and (min-width: 1200px){
#shopify-section-template--15609243140355__16457992856262b06e {
    margin-top: -60px!important;
}
}
8

Hi @marion1234 ,

I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

Here are the Solutions!

Go to Online Store->Theme->Edit code

Asset->/base.css ->paste the below code at the bottom of the file.

@media screen and (min-width: 1200px){
#shopify-section-template--15609243140355__16457992856262b06e {
    margin-top: -60px!important;
}
}

For Desktop

@media screen and (max-width: 600px){
.spaced-section {
    margin-top: 2rem;
}
}

For Mobile

If you have any concerns feel free to ask me!

Regards,
Ani

9

Hi @marion1234 ,

You can try below code:

#MainContent #shopify-section-template--15609243140355__16457992856262b06e,
#shopify-section-template--15609243140355__16457992856262b06e .collage-wrapper {
     margin: 0 !important;
}

NOTE: You should limit the use of margin (-).

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

10

Thanks Ani for your help ! it works great !

11

Thanks for your help :slightly_smiling_face: