Full width collection grid with border

[visualess]

Hi, 

i'm trying to get my website to have a full width grid with grey border (like attached) but can only get it with gaps.

Can anybody help with the code please?

code in theme.liquid

<style> ul#product-grid { gap: 0 !important; justify-content: center !important; } .grid--4-col-desktop .grid__item { border: solid 1px black; } </style>

  

[Made4uo-Ribe]

Hi @visualess 

Do you mean like this?

If it is check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.card.card--standard.card--media {
     border: .3px solid rgba(0, 0, 0, 0.3);
}
ul#product-grid {
    gap: 0;
}

And Save. 

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

[visualess]

Hey! @Made4uo-Ribe 

Thanks for your response!

I added the code and it's like this still. Am I missing something?

 

[visualess]

site: 4qs.uk 

password: 44444

[Made4uo-Ribe · Accepted solution]

Add this one. 

.collection .grid {
    gap: 0px;
}

And  Save.

Result:

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

[visualess]

Amazing thank you!

is it able to go full width or is that not an option?