Jump to content

Why is my product size constrained on desktop AND in mobile? I coded them differently.

Recommended Posts

Here are two images.

I want to constrain my product images by 65 percent on desktop, and have them extend across the screen on mobile. But they are 65 percent on both desktop AND mobile, which I do not have in my code. See below an excerpt of my code with the problem area in bold, and then below that, screenshots of the problem. Please help! 

 

 /* Product gallery styles */
    .product-gallery {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: -50px; /* Adjust the margin as needed */
    }
  /* Style for product images */
.product-container img {
  max-width: 100%; /* Limit the maximum width of each product */
  height: -50px; /* Maintain the aspect ratio of the image */
}
  /* Style for individual product */
    .product {
      position: relative;
      z-index: 2;
      max-width: calc(65% - 1px); /* Limit the maximum width of each product */
      margin: 0 auto; /* Center horizontally by setting auto margins */
      margin-top: 30px;
    }

    /* Target product title headings */
    .product-title {
      font-size: 22px; /* Adjust the font size */
      line-height: 1.2; /* Adjust the line height */

    }
    @media (max-width: 768px) {
      /* Adjust the font size for mobile */
      .product-title {
        font-size: 20px; /* Adjust the font size for mobile screens */
        max-width: 100%; /* Allow product listings to occupy full width on mobile */
    }
      .product {
    position: relative;
    margin-top: -10px; /* Adjust the negative margin to move the product listings up */
    padding-left: 0px; /* You can adjust this as needed */
        padding-right: 0px;
          width: 100%; /* Set the width to 100% to occupy the entire page width */
  }
      .logo {
        width: 200px; /* Adjust the width as needed */
        height: auto; /* Automatically adjust the height to maintain aspect ratio */
        top: 40px; /* Adjust the top position to move the logo down */
        padding-bottom: 0px;
      }
       .footer {
      position: relative;
      z-index: 5; /* Ensure that the footer has a higher z-index value than your products */
      /* Other styling properties for your footer */
    }
    }
  </style>

 

1. Here is my current desktop, which is constrained to 65 percent of it's size, which I like:image.thumb.png.64e4f76559d40587a02eb064470aa6f5.png

And here is the mobile, which squishes the image with a margin. I don't like this big margin, I want it to run all the way across the page.  

 

image.thumb.png.383ab8662de9c4b8c9a5a495de6a1500.png

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.