Shop page Grid View Mobile

Hi @wemarketagency,

Thank you for contacting us.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

@media only screen and (max-width: 599px) {

  .wp-block-columns .wp-block-column {
    flex-basis: calc(50% - 1em) !important;
    flex-grow: 0;
  }
  .wp-block-column:nth-child(2n) {
    margin-left: 2em;
  }  
  .wc-block-grid.has-3-columns .wc-block-grid__product {
    flex: 1 0 50%;
    max-width: 50%;
  }  
  
}

@media only screen and (max-width: 575px) {
  ul.products li.product {
    width: calc(50% - 15px);
    margin-right: 30px;  
  }
}

Hope that helps.

Regards,
Kharis

this code was not working it was just changing the size

@saddamhu55ain thank you for chiming in.

Can you provide a link to your website/page needing help with, so I can inspect and figure out what is stopping the code from working?

Regards,
Kharis

herbalgoods.pk right now I removed the code

@saddamhu55ain thank you for sharing the link.

Try this CSS code:

@media only screen and (max-width: 719px) {
  .shop-columns-mobile-1 ul.products, 
  .shop-columns-mobile-1 .wc-block-grid .wc-block-grid__products {
    grid-template-columns: repeat(2,1fr);
  }
}

Hope that helps.

Regards,
Kharis

this CSS is working fine on the home page but not on the related products you can check it by your self I updated it.