1. BLACK FRIDAY SALES Get Divi.Help Pro Membership @ $99 / lifetime & instantly gain access to all our Divi.Help Pro Membership perks.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed.Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

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. PRO MEMBER PERKS Divi Block Pro - Powerful Divi header builder for you to mix & match premade header design, mobile menu & more:Learn More
  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;
        }
    }
     
    patoduck17 likes this.
  3. Worapath

    Worapath New Member


    It works very well, thank you
     
    1. PRO MEMBER PERKS Divi Login Customizer Plugin - Instantly beautify your Wordpress login page with 6 premade 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!!
     
  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!
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade content toggle design for your Divi site without using any plugins:View Demo
  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;
        }
    }
    
     
  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
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  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;
        }
    }
     
    kimv79 likes this.
  9. kimv79

    kimv79 New Member

    Thank you so much! It works perfectly!
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade slide in bar design for your Divi site without using any plugins:View Demo
  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:

  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;
        }
    }
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Beautify your Divi archive / category page with 15 different premade blog designs:Learn More
  12. Michael Lim

    Michael Lim New Member

    It works perfectly. Thanks
     
  13. yazan

    yazan New Member

    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  14. Divi.Help

    Divi.Help Administrator
    Staff Member

  15. Krill

    Krill New Member

    1. PRO MEMBER PERKS Divi Block Pro - Premade mega menu design for your Divi site without using any plugins: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;
        }
    }
    
     
  17. Krill

    Krill New Member

    Thank you! Fit perfect
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade card carousel design for your Divi site without using any plugins:View Demo
  18. Neo3

    Neo3 New Member

    Hi there,
    Can you please help me modify the 3 column code a little bit?
    For some reason in my case not only the categories and subcategories change to 3 column view on mobile, but the actual products as well.
    I would like to have the (sub)categories shown as 3 columns, and products as 2 columns.
    Many thanks in advance!!