1. HOT Divi Ultimate Header Plugin - Design Divi custom header globally in Divi Builder: https://header.diviultimate.com/

Solved How to set 2 columns shop in mobile?

Discussion in 'Get Help On Divi Wordpress' 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:

  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
     
  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!
     
  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
     
  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!
     
  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;
        }
    }
     
  12. Michael Lim

    Michael Lim New Member

    It works perfectly. Thanks