loop product display width

  • Resolved ariban99

    (@ariban99)


    4 years, 10 months ago

    Hi
    i am trying to display 2 product per line on a mobile phone for the shop page
    i put this in my child theme css but it only works for the front page and not the shop page, can anyone help how i can do this for my shop page as well?

    @media (max-width: 575px) {
    .col-xs-6.col-sm-6.col-md-6.col-lg-4.col-xl-3 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding-right: 10px;
    padding-left: 10px;
    }

    .row {
    margin-right: -10px;
    margin-left: -10px;
    }
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Senff – a11n

    (@senff)

    Without seeing your site, it’s not possible for us to see what might be the issue here. Do you have a link to your site that we can check?

    Thread Starter ariban99

    (@ariban99)

    Yes sorry about that. Its kosherbasix.com
    Thank you

    Plugin Support Senff – a11n

    (@senff)

    To ensure that your products are shown in 2 columsn on mobile screens, adding this CSS code should help:

    @media screen and (max-width: 479px) {
  body.woocommerce .products.mobile-col-2 > .product {
   width: 48% !important;
  }
  body.woocommerce .products.mobile-col-2 > .product:nth-of-type(2n+1) {
    margin-right: 3% !important;
  }
}
    Thread Starter ariban99

    (@ariban99)

    wow that works. thank you

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘loop product display width’ is closed to new replies.