CalvinMoranPizza

Ignore - fixed with chatgpt. Code for reference: /* Custom CSS to display 2 products per row on mobile for the "Menu" page */ /* Target mobile devices with a screen width of 767px or less */ @media screen and (max-width: 767px) { /* Ensure product items are displayed in rows */ #productList { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0; /* Remove any default padding */ margin: 0; /* Remove any default margin */ } /* Adjust each product item to take up exactly 50% of the row width */ #productList .product { width: calc(50% - 2px); /* Calculate width for exactly 2 products per row */ margin-bottom: 10px; /* Spacing between rows */ box-sizing: border-box; /* Ensure padding and borders are included in width calculation */ padding: 0 2px; /* Add padding to create spacing between product items */ } /* Ensure only 2 products per row by adjusting margins on every 3rd product */ #productList .product:nth-child(odd) { margin-right: auto; /* Auto margin on odd-numbered products to push them to the left */ } /* Reset margin for every 2nd product to ensure consistent spacing */ #productList .product:nth-child(even) { margin-left: auto; /* Auto margin on even-numbered products to push them to the right */ } }

Hi guys, I need some help changing the product display on my menu page from 1 to 2 items per row. https://gerringongpizza.com/menu I have tried countless solutions such as this: @media screen and (max-width:767px) { .products .list-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; display:grid; grid-column-gap:12px; grid-row-gap:12px; }} with no luck. Any help would be appreciated.