Home › Forums › WoodMart support forum › increase spacing between products

increase spacing between products

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • July 23, 2022 at 2:16 pm #393060

    cesaicumpar
    Participant

    This is how products grid looks like now: https://postimg.cc/K4WdvkNJ – there is no spacing between products

    However, if I want to add spacing, this happens: https://postimg.cc/qhSj0nTK – there are only 3 colums of products and big white space

    Apparently, changing the site width doesn’t work, because the products size changes with it.

    So how can I make the products width smaller so they can fit 4 products in a row, with 15 px spacing between them?

    Or how can I change site width and keep the products size the same, so again it fits 4 products?

    July 23, 2022 at 3:51 pm #393082

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try adding the following Custom CSS in the Custom CSS for Desktop area under Theme Settings >> Custom CSS.

    .product-grid-item.product.wd-hover-standard.col-lg-3 {
    max-width: 20%;
}

    Best Regards

    July 23, 2022 at 4:38 pm #393088

    cesaicumpar
    Participant

    Thank you! It works on desktop.

    Is the code the same for mobile?

    I tried to do it on mobile and set the margin-right to 10px and max-width to 47%, but it is not centered – https://postimg.cc/9Dn24Nb6

    July 25, 2022 at 9:36 am #393294

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You are Most Welcome.

    Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .product-grid-item {
    margin-right: 5px;
    margin-left: 5px;
    }

    Best Regards

    July 27, 2022 at 6:04 pm #393926

    cesaicumpar
    Participant

    Hello! I am reaching out again because I noticed a problem regarding mobile users that have the big/zoomed in text feature turned on (from mobile settings)

    Basically, this is how it looks for them – https://postimg.cc/G9dCWjtM

    There is only one column of products and the Search icon isn’t fully showing.

    The icon isn’t that big of a problem, as much as the product column is.

    Is there a solution to this without changing how it looks for normal mobile users?

    July 28, 2022 at 10:49 am #394037

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    The issue is caused by the margin values you added to make the space between the Grid.

    Sorry but it’s not possible to fix without removing the CSS styling for the grid for Mobiles.

    Best Regards

    July 28, 2022 at 1:25 pm #394076

    cesaicumpar
    Participant

    isn’t it possible to change it for a lower media? eg. for mobile is 768px, maybe I could lower that?

    this doesn’t happen on bigger websites so there has to be a solution

    July 28, 2022 at 3:47 pm #394117

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please try adding the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

    .product-grid-item.product.wd-hover-standard.col-lg-3 {
    max-width: 46%;
}

    Otherwise, if still issue will not solve then please share the WP admin login details.

    Best regards.

    July 28, 2022 at 9:12 pm #394176

    cesaicumpar
    Participant

    It works, but the right margin seems to be longer than the left again – https://postimg.cc/G99hhpcv

    I searched the code for margin-right sizes bigger than margin-left but cant find anything

    I will leave the login details below so you can take a look

    July 29, 2022 at 10:15 am #394272

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    Please check it now, I have added the small custom CSS code for mobile in theme settings.

    Best Regards.

    July 29, 2022 at 11:48 am #394291

    cesaicumpar
    Participant

    it seems fine now, thank you.

    July 29, 2022 at 12:43 pm #394305

    Aizaz Imtiaz Awan
    Keymaster

    Hello,

    You are Most Welcome.

    Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

    Have a wonderful day.

    Topic Closed.
    Best Regards.

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘increase spacing between products’ is closed to new replies.