How to have 2x2 columns for products on mobile?

Home › Forums › Jevelin Theme › How to have 2×2 columns for products on mobile?

Home › Forums › Jevelin Theme › How to have 2×2 columns for products on mobile?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    NOT RESOLVED Posts

  • vanityinvancity
    Participant

    I’m wanting the mobile view to show 2×2 product layout instead of 1 image. Similar to the attached picture..

    Thanks for your help!

     

     

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Hi @vanityinvancity,

     

    I hope you are well today and thank you for your question.

     

    Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

     

    Best regards,
    Shufflehound team

    vanityinvancity
    Participant

    Hi Shufflehound team!

     

    Thank you for the response. My URL is http://www.chronicexpress.ca/

    Shufflehound Support
    Moderator

    You can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media (max-width: 800px){
.sh-woocommerce-products .woocommerce.columns-4 ul.products li.product {
    width: 50%;
}
}

    vanityinvancity
    Participant

    Thanks! That works great for the home page shop (the ‘jump-to-section” shop area) but what about for the actual shop page for mobile? I’ve attached what the shop page looks and the ‘jump to’ shop page. Thanks again!

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    To make it work on shop page also try using below custom CSS code instead of above.

     

    @media (max-width: 800px){
.sh-woocommerce-products .woocommerce.columns-4 ul.products li.product,
.archive.tax-product_cat #page-container  ul.products li.product,
.post-type-archive-product #page-container  ul.products li.product {
    width: 50% !Important;
}
}
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)