Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #1441928

    on my woocommerce shop page the whole grid is not aligned to center. larger horizontal margins on the right hand side. how can I center align the grid?


    the shop catalogue grid is not centered due to a these issue or woocommerce issue? Thank you


    The same issue exists on the product category pages – the grid is not centered on the page


    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,


    Thank you Mike
    I did try a few css code snippets to center align the grid but they did not do it and I have commented them out. Is this what you mean by “It looks like you tried to modify the width of the items and the margin in between” otherwise where do you see alignment was attempted?
    The first code you offered works well on large screens but on a mobile the margins are still not equal left and right.
    I do wish to display three products per row.


    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,


    Thank you very much!
    Mobile is now also center aligned.


    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,

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Center align products grid on page’ is closed to new replies.