Why is my product grid misaligned on the Empire theme?

Store Design
,
1

Hello, I am using the Empire theme and in the Collection pages the product grid is misaligned.

It’s most noticeable on the first row.

buchanan_0-1668463878820.png
buchanan_0-1668463878820.png1006×640 189 KB

2

hi @buchanan
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.

3

Hi there @ExpertRookie

No password currently.

Thanks for taking a look!

4

Hi @buchanan

You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

.template-collection .productgrid--items.products-per-row-4 {
display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
}
.template-collection .productgrid--items .productgrid--item {
    margin: 0!Important;
    width: 100%!important;
}
@media(max-width: 679px){
.template-collection .productgrid--items.products-per-row-4 {
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}
}
1 Like
5

That’s perfect. Thank you so much!