Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 23, 2018 at 3:50 pm #901497
    at-elier

    Hi,

    For the presentation of products woocommerce I use the grid of products on 5 columns. On desktop and smartphone I have no problem. But I would want to make be thought of the number of columns in 4 as the screens from 768 in 1200 px. How can it be done?

    Thank

    Christophe

    January 23, 2018 at 4:35 pm #901540
    Nikko

    Hey Christophe,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:1200px) and (min-width:768px) {
  #top .shop_columns_5 .products .product {
    float: left;
    margin: 0 1% 1% 0;
    padding: 0;
    position: relative;
    width: 24%;
    margin-left: 0;
  }

  #top .shop_columns_5 .products .product.first {
    clear: none;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    January 23, 2018 at 4:40 pm #901543
    at-elier

    Hello,

    Thank you for the code. But it does not work well. It leaves an element on the only one line. See joined photo.

    http://www.at-elierdev.be/jeuxwoo/images/enfold.png

    Thank you.

    Christophe

    January 23, 2018 at 5:56 pm #901585
    Nikko

    Hi,

    Can you post a link to the page in the screenshot? you can post the link in private content so only the moderators and you (thread creator) can view it.

    Best regards,
    Nikko

    January 23, 2018 at 9:50 pm #901686
    at-elier

    Hi,

    Link : http://www.at-elierdev.be/jeuxwoo/boutique/catalogue/mosaique/

    Thanks

    Christophe.

    January 24, 2018 at 3:22 am #901833
    Nikko

    Hi,

    Thanks for providing the link, can you replace the css code I gave above with this:

    @media only screen and (max-width:1200px) and (min-width:768px) {
  #top .shop_columns_5 .products .product {
    float: left;
    margin: 0 1% 1% 0;
    padding: 0;
    position: relative;
    width: 24%;
    margin-left: 0;
  }

  #top .shop_columns_5 .products .product.first {
    clear: none;
  }

  #top .shop_columns_5 .products .product:nth-child(4n+1) {
    clear: both;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    January 24, 2018 at 3:40 pm #902189
    at-elier

    Hi,

    Thank you for your reply.

    Some photos are stuck the one on the other one without respecting the space between columns, idea to solve the problem?

    Thanks.

    Christophe.

    January 24, 2018 at 8:27 pm #902294
    Nikko

    Hi,

    I’m not seeing it on my end, can you give us a screenshot on how it looks on your end?

    Best regards,
    Nikko

    January 25, 2018 at 11:01 am #902752
    at-elier

    Hi,

    Here is a link : http://www.at-elierdev.be/jeuxwoo/images/enfold_2.png with the problem.

    Thanks.

    Christophe

    January 27, 2018 at 9:02 pm #903744
    Nikko

    Hi,

    Thanks for providing the screenshot, can you try to replace the code I gave before to this:

    @media only screen and (max-width:1200px) and (min-width:768px) {
  #top .shop_columns_5 .products .product {
    float: left;
    margin: 0 1% 1% 0;
    padding: 0;
    position: relative;
    width: 24%;
    margin-left: 0;
  }

  #top .shop_columns_5 .products .product.first {
    clear: none;
  }

  #top .shop_columns_5 .products .product:nth-child(4n+1) {
    clear: both;
  }

  #top .shop_columns_5 .products .product.last {
    margin-right: 1% !important;
  }
}

    Best regards,
    Nikko

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