Remove padding at the top all collections for mobile only. (Dawn Theme)

[AndreyGutthard]

Hey all,

Im using dawn theme,

And I have been going for this design : (grid around product cards)

current result and code in base.css : URL: https://derstacheldraht.com/collections

The plan is to remove the top border on the product cards and add a border at the top of every collection.

So that the grid dosen’t show as 2px in the row gap.

I Need to remove the padding at the top of every collection for media screen only. (market with red arrow)

@media (max-width: 767px){
slider-component {

padding: 0 !important;
}
@media only screen and (max-width: 767px) {
.collection .grid__item:nth-child(2n) {
border-left: 1px solid #B2B2B2 !important;
}

.collection .grid__item {
border-top: 1px solid #B2B2B2 !important;
border-bottom: 1px solid #B2B2B2 !important;
}

.grid {
column-gap: 0 !important;
row-gap: 0 !important;
}

@media screen and (max-width: 767px)
{
.collection .grid__item {

max-width: calc(51% - var(–grid-mobile-horizontal-spacing) / 2) !important;

}
@media screen and (max-width: 767px)
{
.collection {

border-top: 1px solid #B2B2B2 !important;
}

Every help is greatly appreciated!

[Moeed]

Hey @AndreyGutthard

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above tag.

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Made4uo-Ribe]

Hi @AndreyGutthard

Check this one,

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 767px) {
.collection.section-template--19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f-padding {
    border-top: 0 !important;
        }
ul#Slider-template--19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f {
    margin-top: 0px !important;
}
 }

And save.

Result:

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[AndreyGutthard]

Thank you so much Made4ou,

I works!

I had to edit the code slightly so that the border that i added shows up:

@media only screen and (max-width: 767px) {
.collection.section-template–19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f-padding {
border-top: 1 !important;
}
ul#Slider-template–19601307271433__ad5e0019-3f09-4f9a-8532-550e31bfbf7f {
margin-top: 0px !important;
}
}

[AndreyGutthard]

Hey Moeed, thank you for replying so fast.

This Code works for the collection in the home page only. I need the border to show up in the other collections aswell.