Center align products grid on page

Hi,
It looks like you tried to modify the width of the items and the margin in between and the new width doesn’t fill the width of the grid, this css it will keep the space in between that you wanted and also fill the grid width:

#main .container_wrap_first.shop_columns_3 .products .product {
    width: 30.59%;
}

The grid needs to keep it’s float left so when you have a odd number the grid items they align left to right and align with the product sort.
If you really want to keep the current width and don’t mind rows with less than 3 items to also centered then you can try this css:

#main .container_wrap_first.shop_columns_3 .products.columns-3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

Best regards,
Mike

Hi,
For mobile width I see that your grid is two columns wide and the items in the right column have a right margin, so try adding this css for mobile devices, it will remove the margin and adjust the width of the items to fill the grid width like above.

@media only screen and (max-width: 767px) { 
	.responsive #top #main .container_wrap_first.shop_columns_3 .products .product:nth-child(even) {
    margin-right: 0;
}
.responsive #top #main .container_wrap_first.shop_columns_3 .products .product {
        width: 46%;
}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
I also checked the tablet sizes when the columns first become three wide and it looks good there.

In case you are checking the css on a iPhone, please note that iPhones can be hard to clear the cache, often you also need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike