Adjust Gaps on Main Page and Collection Pages

[lucianofashion1]

Hi, i am using theme BLOCKSHOP v10.2.0  CLICK HERE TO SEE 

See Image below, i would like to make the gaps Narrow in between the Main Page "Grid With Overlay" and also the Collection Page images.

Any help would be appreciated.

[Moeed]

Hey @lucianofashion1 

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 </body> tag

<style>
.featured-grid--body {
    gap: 0 !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[lucianofashion1]

Sorry. For Main Page.
I still want a gap but very narrow, on the edges of the screen and in between horizontal and vertical.

For the Collection Pages:
I still want a gap but very narrow, on the edges of the screen and in between horizontal and vertical.

[Mehran_Ali · Accepted solution]

Hi @lucianofashion1 

You can achieve this by adding this CSS code I believe you don't want to remove the gap just wanted to minimize it right
You just need to follow these steps:

1) Go to the Online Store
2) Edit Code
3) Find theme.css / base.css

And past that CSS Code:

.featured-grid--body {
    gap: 15px;
}

.featured-grid--root {
    padding-top: 40px;
}

The Result:

This CSS is for the Collection Page Gap pasted into the same file name as base.css or theme.css :

.main-collection--grid {
    gap: 10px;
}

The Result:

If you want the gap to be complete;y remove just change the value of gap to 0

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

[lucianofashion1]

Hi, i still have Gaps on the edges on Mobile?

[Mehran_Ali]

Hi @lucianofashion1 

add this CSS

.featured-grid--root, .main-collection--root {
    padding-inline: 5px;
}

as well with the others it will resolve the mobile issue 

[lucianofashion1]

One last thing sorry.

Product Page on Mobile i want 5px gaps on edges can you help? Thanks

[Mehran_Ali]

Sure add this CSS 

.main-product--root {
    padding-inline: 5px;
}

[lucianofashion1]

Much appreciated, One more thing.

Collection Header on Mobile and Desktop. too much White Above and Below and on edges, can you resolve?

Thanks

[Mehran_Ali]

Sure here is the CSS

@media(max-width:768px){
    .collection-header--heading {
        padding: 10px 5px 5px !important;!i;!;
    }
    
    .navigation--mobile-header {
        padding-top: 0 !important;!i;!;
    }
}

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!