1. PROMO Get 60% OFF Lifetime Pro Membership & access all our Pro Divi Extensions, Divi Layouts, Divi AI Generator, Divi Block, etc.VIEW PRICING
Dismiss Notice
UPDATE Custom Color Scheme + Premade Divi Layouts - A perfect combination to boost productivity. New 'Gadget Repair' layout added.Try our Custom Color Layouts
BEST Divi Block - A revolutionary online drag & drop tool to easily mix & match 478+ premade blocks to kick start your Divi site design. Special module designs are included as well.
Learn MoreTry Free Version

Solved How to set 2 columns shop in mobile?

Discussion in 'Free Divi Community Forum' started by Worapath, Nov 3, 2018.

  1. Worapath

    Worapath New Member

    The website shop is shown in tablet and desktop properly, but It has only 1 column in mobile.

    I don't know how to change to 2 columns shop in mobile.


    Regards.

    PS. tanyahan.co
     

    Attached Files:

    #1 Worapath, Nov 3, 2018
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try to add this CSS at Divi -> Theme Options -> Custom CSS:
    Code:
    @media screen and (max-width: 479px) {
    .et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) {
        width: 45.25%!important;
        margin: 0 9.5% 9.5% 0!important;
    }
    .et_gallery_item:nth-child(2n), .et_pb_column .et_pb_grid_item:nth-child(2n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(2n), .et_pb_column .woocommerce ul.products li.product:nth-child(2n), .woocommerce-page ul.products li.product:nth-child(2n) {
        margin-right: 0!important;
    }
}
     
    #2 Divi.Help, Nov 3, 2018
    patoduck17 likes this.
  3. Worapath

    Worapath New Member


    It works very well, thank you
     
    #3 Worapath, Nov 3, 2018
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  4. davnlou

    davnlou New Member

    Thank you from me too...
    I've been struggling for ages to get 2 columns on mobile...
    Worked for me too!!
     
    #4 davnlou, Mar 1, 2019
  5. kimv79

    kimv79 New Member

    Hi, does this also works for a 3 or 4 column display? I tried changing the code, but it doesn't work so far.. Can you help me? Thank you!
     
    #5 kimv79, Mar 19, 2019
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Custom Divi Builder header on desktop + default slide in / fullscreen menu on mobile:Learn More
  6. Divi.Help

    Divi.Help Administrator
    Staff Member

    Try the below CSS for 3 column in mobile:
    Code:
    @media screen and (max-width: 479px) {
    .et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) {
        width: 29.667%!important;
        margin: 0 5.5% 5.5% 0!important;
    }
    .et_gallery_item:nth-child(3n), .et_pb_column .et_pb_grid_item:nth-child(3n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(3n), .et_pb_column .woocommerce ul.products li.product:nth-child(3n), .woocommerce-page ul.products li.product:nth-child(3n) {
        margin-right: 0!important;
    }
    .woocommerce-page ul.products li.product:nth-child(2n+1) {
        clear: none!important;
    }
}
     
    #6 Divi.Help, Mar 19, 2019
  7. kimv79

    kimv79 New Member

    Thank you, but unfortunately it doesn't work. It still shows two columns. See www.dutchwristart.com - the colored blocks
     
    #7 kimv79, Mar 20, 2019
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  8. Divi.Help

    Divi.Help Administrator
    Staff Member

    For your case, try this instead:
    Code:
    @media screen and (max-width: 479px) {
    .et_gallery_item:nth-child(n), .et_pb_column .et_pb_filterable_portfolio .et_pb_portfolio_item.et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_grid_item:nth-child(n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(n), .et_pb_column .woocommerce ul.products li.product:nth-child(n), .woocommerce-page ul.products li.product:nth-child(n) {
        width: 29.667%!important;
        margin: 0 5.5% 5.5% 0!important;
    }
    .et_gallery_item:nth-child(3n), .et_pb_column .et_pb_grid_item:nth-child(3n), .et_pb_column .et_pb_shop_grid .woocommerce ul.products li.product:nth-child(3n), .et_pb_column .woocommerce ul.products li.product:nth-child(3n), .woocommerce-page ul.products li.product:nth-child(3n) {
        margin-right: 0!important;
    }
    ul.products li.product:nth-child(2n+1) {
        clear: none!important;
    }
    .woocommerce ul.products[class*=columns-] li.product:nth-child(2n) {
        float: left!important;
    }
    #page-container ul.products li.product:nth-child(3n+1) {
        clear: both!important;
    }
}
     
    #8 Divi.Help, Mar 20, 2019
    kimv79 likes this.
  9. kimv79

    kimv79 New Member

    Thank you so much! It works perfectly!
     
    #9 kimv79, Mar 20, 2019
    1. PRO MEMBER PERKS Divi.Help One-Page Layouts - Beautifully crafted one-page Divi layouts just for you:View All Layouts
  10. Michael Lim

    Michael Lim New Member

    I try the two columns code, but the image display not correct, I need it in square and smaller. How to set ?
     

    Attached Files:

    #10 Michael Lim, Aug 13, 2019
  11. Divi.Help

    Divi.Help Administrator
    Staff Member

    It seems like the height is set by Royal Commerce Child Theme.

    To fix it, you can try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    @media screen and (max-width: 479px) {
    #page-container .et_shop_image, #page-container .et_shop_image img {
        height: auto!important;
        min-height: 0!important;
        max-height: none!important;
    }
}
     
    #11 Divi.Help, Aug 13, 2019
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  12. Michael Lim

    Michael Lim New Member

    It works perfectly. Thanks
     
    #12 Michael Lim, Aug 13, 2019
  13. yazan

    yazan New Member

    #13 yazan, Jan 24, 2021
    1. PRO MEMBER PERKS Divi Ultimate Header Plugin - Add custom vertical navigation for your Divi site. Turns into slide in menu on mobile:Learn More
  14. Divi.Help

    Divi.Help Administrator
    Staff Member

    #14 Divi.Help, Feb 1, 2021
  15. Krill

    Krill New Member

    #15 Krill, Apr 12, 2022
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo
  16. Divi.Help

    Divi.Help Administrator
    Staff Member

    For your case, try this CSS:
    Code:
    @media screen and (max-width: 768px) {
    .woocommerce-page #page-container .related.products li.product:nth-child(n), .woocommerce #page-container .related.products li.product:nth-child(n) {
        width: 50%!important;
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        margin: 0!important;
    }
}
     
    #16 Divi.Help, Apr 25, 2022
  17. Krill

    Krill New Member

    Thank you! Fit perfect
     
    #17 Krill, Apr 26, 2022
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
(You must log in or sign up to post here.)