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

    I apologize if this has been covered before, but I’d like to change the number of columns in the product grid to 2 instead of 1 when viewing on a smaller screen.

    It should be the layout as the “related products” section on the single product view.

    #92611

    Hi,

    The related products are already shown in 2 columns when viewing on iphone or any other mobile devices with less than 468px screen width. This can be accomplished using Media Queries.

    Regards,

    Ismael

    #92612

    Yes that’s why I was using the Related Products section as an example of how we’d like it to look.

    We want the products in the store view to also appear in two columns.

    I understand that this is done using Media Queries, but I was hoping for more specific instruction since I’m new to the concept.

    #92613

    To clarify what I’m asking – I don’t know where, or how to make the change.

    I understand it conceptually but I’m looking for specifics.

    #92614

    Does my question make sense? I’m surprised that this hasn’t been asked before, looking forward to your response!

    #92615

    So in woocommerce-mod.css after:

    @media only screen and (max-width: 767px) {

    I deleted:

    #top .products .product {

    margin: 0 0 20px 0;

    width: 100%;

    }

    And added:

    #top .products .product {

    margin: 0 4% 20px 0;

    width: 48%;

    }

    #top .products .product:nth-child(even) {

    margin: 0 !important;

    }

    #top .products .product:nth-child(odd) {

    margin: 0 4% 0 0 !important;

    }

    Not quote there yet though, and can’t find what I’m missing. Little help?

    #92616

    Ok, found it, needed to add:

    .products .product.first {

    clear: none;

    }

    #92617

    Hi!

    Glad that you solved the problem. Thread closed.

    Regards,

    Peter

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘changing product view on smaller screens from 1 to 2 columns’ is closed to new replies.