Squarespace 7.1 - Summary Block: minimum 2 items per row on mobile

Site URL: https://steven.squarespace.com/clients/p/unapologetic-foods

Currently, on small screens, Summary Block always shows only 1 item per row. Is there a code that would force it to show at least 2 items per row? Thank you in advance.

My testing result

3 hours ago, bangank36 said:

 

Hi,

You can try adding to Home > Design > Custom Css

/*Setting 2 item in 1 row summary block on mobile*/
@media only screen and (max-width: 767px) {
  #block-yui_3_17_2_1_1636734918137_160690 .summary-item {
    width: 50% !important;
    display: inline-block;
    float: right;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

The code works well only with even number of items.

But with odd number of items, not perfect. For some reason { float: left; } doesn't fix it.

Any way to fix it?

Found another bug:

Between 675px and 767px wide, the layout is all messed up:

1 hour ago, bangank36 said:

Hi,

Kindly replace my previous codes with the following ones

@media only screen and (max-width: 767px) {
  .summary-item-list {
    display: flex;
    flex-wrap: wrap;
  }

  .summary-item {
    width: 50% !important;
  }
}

 

Unfortunately, between 675px and 767px wide, the layout is still messed up. Anyway to fix it? Thanks.

3 hours ago, bangank36 said:

Hi @alanx,

I suggest another solution with grid. Try the following code on your site

@media only screen and (max-width: 767px) {
.summary-item-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
  .summary-item {
  width: 100% !important;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you, this works!