Wexley Theme - Looking to have my shop items display in rows of 2 on mobile

1 hour ago, LukosPH said:

I entered this block of code (below) in Squarespace to have my shop stack its items in rows of 2 of mobile instead of the default rows of 1. This code aligns everything to the left and makes them half as big, but the items remain in rows of 1 and the right half of the screen is empty. I fear the Wexley theme specifically is keeping the items from stacking in rows of 2. Can anyone point me in the direction of a solution?

@media screen and (max-width: 767px) {
  .sqs-block-product {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* Updated line */
    gap: 10px !important; /* Optional: Adjust the gap between items */
  }
  .sqs-block-product .sqs-block-product-item {
    margin-right: 0 !important;
  }
}


My site is lukospicturehouse.com/shop 

This is the best adjustment I can reach with CSS on your site

@media only screen and (max-width: 767px) {
  #collection-664535bf6bb59d215736cbca .sqs-layout > .sqs-row {
    width: 50% !important;
    float: left
  }

  #collection-664535bf6bb59d215736cbca .sqs-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

My demo