Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 5, 2021 at 10:13 am #1298481
    MulderMind

    Hi there,

    I made a productfilter on my website and wanted to show the products in 5 columns.
    To do so I searched the forums here and found some CSS.
    Only problem is that on smarthphones it shows up sorta strang – see pic.

    Can you guys help me out so that it shows in 2 columns on mobile phones?

    Thanks in advance!

    The CSS i used:

    ‘}
    ul.products.columns-4 {
    display: table;
    margin: 0 auto;
    }

    ul.products.columns-5 .product {
    width: 19% !important;
    }`

    • This topic was modified 3 years, 7 months ago by MulderMind.
    May 5, 2021 at 2:47 pm #1298581
    Yigit

    Hey,

    Thanks for contacting us!

    Please use the code as following so it only applies on screens above 767px

    @media only screen and (min-width: 767px) {
ul.products.columns-4 {
display: table;
margin: 0 auto;
}

ul.products.columns-5 .product {
width: 19% !important;
}}

    Best regards,
    Yigit

    May 5, 2021 at 3:07 pm #1298597
    MulderMind

    Hi Yigit,

    Thanks – tried that but some some weird reason it makes it so that the whole width of the site changes :)
    Does the trick on mobile though.

    With kind regards,

    May 5, 2021 at 4:18 pm #1298624
    Yigit

    Hi,

    Please check your CSS for any errors using this website – http://csslint.net/. It sounds like you have CSS error :)

    Best regards,
    Yigit

    May 5, 2021 at 4:56 pm #1298650
    MulderMind

    Thanks, it works now – turned out there was another CSS snippet causing the error – I added that to hide the price on the product overview.
    When i remove it the error is gone but the price is back.

    Any suggestion on what might be cause the conflict?

    This is the other code: 

    .inner_product_header_cell > .price,.inner_product_header_cell > .woocommerce-de_price_taxrate,.inner_product_header_cell > .woocommerce_de_versandkosten {
display: none !important;
    May 5, 2021 at 4:59 pm #1298653
    MulderMind

    An image in case it helps – I want to remove the prices from that overview.

    May 8, 2021 at 7:49 am #1299075
    Rikard

    Hi,

    Thanks for the update. It looks like you have simply forgot to close the CSS block. Please try this instead:

    .inner_product_header_cell > .price, .inner_product_header_cell > .woocommerce-de_price_taxrate, .inner_product_header_cell > .woocommerce_de_versandkosten {
    display: none !important;
}

    Best regards,
    Rikard

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