Gapless grid lines/full page grid lines?

[MaiaMonange]

I need help getting the gaps out of my grid lines as well as extending them the full page width, I’m not sure how to really go about changing it.

Gridlines I’m trying to get

My current grid lines

[Moeed]

Hey @MaiaMonange

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>
slider-component {
    padding: 0 !important;
}
.grid__item {
    width: 25% !important;
    max-width: 25% !important;
}
.grid {
    gap: 0 !important;
}
</style>

RESULT:

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

[MaiaMonange]

is there a way to fix it on a media screen? I get this when i put the code in

[Moeed]

Ah, my bad. Try this updated code with the same steps mentioned above.

<style>
@media screen and (min-width: 768px) {
slider-component {
    padding: 0 !important;
}
.grid__item {
    width: 25% !important;
    max-width: 25% !important;
}
.grid {
    gap: 0 !important;
}
}
</style>

That should fix your problem.

Best,
Moeed

[MaiaMonange]

@Moeed

<style>
@media screen and (min-width: 768px) {
slider-component {
    padding: 0 !important;
}
.grid__item {
    width: 25% !important;
    max-width: 25% !important;
}
.grid {
    gap: 0 !important;
}
}
</style>

thank you very much!

[Moeed]

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[MaiaMonange]

Hey moeed I’m having another problem if you have time, the lines arent stretching the full screen width and they still have gaps in them on mobile, I tried adjusting the code and I couldn’t get it figured out, if you could check it out it’d be greatly appreciated!