Get rid of the collection list top margins, in mobile view, on Dawn theme

Store Design
, ,
1

Hello everyone,
After hours of searching and trying all kinds of codes that don’t work, I would appreciate it if someone could tell me how to get rid of those collection list top margins, in mobile view, on Dawn theme (Attached picture). It only appears on mobile view.
Thanks

Ann21_0-1668678720761.png
Ann21_0-1668678720761.png602×160 32.4 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hello @Ann21 ,
Please share your store URL.

4

www.ankitimes.com

1 Like
5

@Ann21

Add this CSS below of online store >> edit code >> Assets >> base.css

.collection-list-section {
margin-top: 0px !important;
}
.collection-list-section .title-wrapper-with-link {
margin-top: 10px !important;
margin-bottom: 10px !important;
}

6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media screen and (min-width: 750px){
.image-with-text {
margin-bottom: 25px!important;
margin-top: 25px!important;
}
.collage-wrapper.no-heading {
margin-top: calc(6rem + var(--page-width-margin));
margin-top: 25px!important;
margin-top: 25px!important;
}
.element-margin, .spaced-section {
margin-top: 0!important;
}
}

Screenshot :- https://prnt.sc/MM5Y9k25S6jH

7

Thanks a lot, worked great.
Is it also possible to reduce the white space on desktop view?
The space there is between the image banner and the collection list. There are no margins inside the collection list like it was in the mobile view.
Thanks

1 Like
8

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.image-with-text {
margin-top: 30px;
margin-bottom: 30px!important;
}
.collage-wrapper.page-width.no-heading {
margin-top: 30px;
margin-bottom: 30px;
}
section#shopify-section-template--15133192618184__collage {
margin-top: 0!important;
}

Screenshot :- https://prnt.sc/In37qrdtmTyF

9

Thanks, but what I meant is as in the picture.
On mobile it works great now. But not on desktop.

Ann21_0-1668687063741.png
Ann21_0-1668687063741.png1846×290 106 KB

10

How can I please do this also in the desktop view?
Thank you

11

@Ann21 ,

Add this CSS below of online store >> edit code >> Assets >> base.css

.collection-list-wrapper.page-width.no-heading.no-mobile-link {
margin-top: 25px !important;

}

12

Thank you. It fixed the desktop nicely but affected the mobile again.
Is it possible to make it so that it does not affect the mobile?
Many thanks again, really appreciate it

13

@Ann21,

Add this CSS below of online store >> edit code >> Assets >> base.css

.collection-list-wrapper.page-width.no-heading.no-mobile-link {
margin-top: 25px !important;

}

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

.collection-list-wrapper.page-width.no-heading.no-mobile-link {
margin-top: 0px !important;

}

}

14

It worked! Looks exactly how I wanted it.
Thank you very much. I really appreciate that!

1 Like