Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 13, 2018 at 6:43 am #996541
    tankerhq

    Hi there, I am trying to close the gap between the product grids that I have set up. It looks like the margins are what are separating them.

    What would be the CSS to add to remove or change the distance between these?

    Thanks!

    August 13, 2018 at 9:04 am #996579
    Ismael

    Hey tankerhq,

    Thank you for using Enfold.

    You have to adjust the margin between the product items. For a 5 column grid, you can use this one.

    
.shop_columns_5 .products .product {
    margin: 0;
    width: 19.2%;
}

    Just replace “5” with the current number of columns if you want to apply the css code to another product grid with a different number of columns.

    Best regards,
    Ismael

    August 14, 2018 at 11:28 pm #997366
    tankerhq

    Hi Ismael,
    thanks for this. I tried this out and not sure it was the right code for what I am after.

    I am trying to get rid of the space between the product groups that have separate product groups as they need to be in a certain order on the website for the client.

    View post on imgur.com

    http://www.coolfood.co.nz/catering/afternoons/

    For example the sandwiches and wraps above. I have made separate product galleries (using different category tags) for wraps and sandwiches but would like them to be closer together because they are under a title together.

    Cheers,
    Gemma

    • This reply was modified 6 years, 4 months ago by tankerhq.
    August 15, 2018 at 4:59 am #997413
    Ismael

    Hi,

    Thanks for the clarification. Use this css code instead.

    .avia-content-slider {
    margin: 5px 0;
    clear: both;
}

    It’s going to adjust the space between the product sliders. Default margin value is “30px 0”.

    Best regards,
    Ismael

    February 2, 2021 at 9:21 am #1277009
    Kelly Erickson

    Came across this post doing a search and tried the CSS but it only added padding to the top of the entire Product Grid, not between the rows of products as indicated in the screenshots. Would there be a new(er) solution to this issue?

    Thanks!

    February 3, 2021 at 4:59 am #1277228
    Ismael

    Hi,

    The css code above is supposed to decrease the space between the content slider. If you want to increase the space between the rows, use this css code instead.

    .template-shop .products .product {
	margin: 0 1% 5% 0;
	width: 32.6%;
}

    Best regards,
    Ismael

    February 3, 2021 at 8:03 am #1277262
    Kelly Erickson

    Hmm I have nothing. Can you help me identify which line determines this spacing between rows in a product grid? I am aiming for about 30 pixels between those rows. My sample link is in the private content. Thank you!

    February 4, 2021 at 5:12 am #1277524
    Ismael

    Hi,

    Thank you for the update.

    It may not be working yet because the css files are compressed or minified. Please disable that option temporarily. You could also try the following css code but it is basically the same as the previous one. 

    div .products .product {
	margin: 0 1% 5% 0 !important;
}

    Best regards,
    Ismael

    February 4, 2021 at 10:59 pm #1277801
    Kelly Erickson

    I already have the CSS minify option disabled. The code provided added space between the columns and pushed down the 4th column to the next row. I guess I still don’t understand which of the margin options adds space between the rows and not really messing with other spacing between columns, for instance.

    The only work-around I can think of right now is changing the minimum height of the inner product header but it doesn’t look great on mobile so I’m trying my VERY basic CSS knowledge and ability to Google things to fix it….

    It just seems to me there should be some simple padding rules here but what do I know!

    February 5, 2021 at 2:35 pm #1278022
    Ismael

    Hi,

    Did you actually try the most recent css code that we recommended above? This is what we get when we remove the minimum height of the content header and apply the above css code.

    Screenshot: https://imgur.com/1UkJZDb

    You may need to disable the file compression after adding the css modification.

    div .products .product {
	margin: 0 1% 10% 0 !important;
}

    Thank you for your patience.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.