Jump to content

Need 2 products per row on mobile review

Recommended Posts

  • Replies 1
  • Views 248
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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 */
  }
}

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.