Help Displaying Products 4 in a Row on Desktop Without Messing up Mobile View

Store Design
1

Hey there -

Website: https://www.clarasunwoo.com/

I edited some code yesterday to make it so when a user is typing in the search bar, it displays all products matching without requiring you to hit ENTER or select “View All”. However, now when you change the display window size (shrinking/expanding desktop or viewing on a mobile device), the formatting is all off and the items are no longer staying in their inline-box format.

The only thing in the code that I changed that affected this was:

.Grid__Cell {
  box-sizing: border-box;
  display: inline-block;
  width: 25%;
  padding: 0 0 0 24px;
  margin: 0;
  vertical-align: top;
  font-size: 1rem;
}

I changed the width to 25% instead of 100%, because when it was 100%, it would just display on GIANT product in a row.

Also now it’s only displaying 10 items when searching instead of all of them… lol