Jump to content

Height of 'product' class in injectable HTML affecting top of every page, across the entire site. Help!!

Recommended Posts

I want to keep all of my products at a certain height across my entire website. But when I do this via CSS inside of injectable HTML, it applies across my entire site. I cannot find a way to pinpoint the products more specifically.

 you can see on my landing page the the page begins too far down, leaving a gap between it and the navigation bar. 

 here is the product page, which has the products at a certain height. I like this layout and want to keep it. I just don't want this height to apply to the top of every single page.

Here is an excerpt of my current code with the trouble spots in bold:

  <style>
    /* Reset margins and padding for the entire website */

    /* Adjust the logo's position */
    .logo {
      position: absolute;
      top: 38px;
      left: 50%;
      transform: translate(-50%);
      z-index: 4;
    }
  
    /* Center the main navigation bar vertically and horizontally */
    #topNav .main-nav {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 6px; /* Adjust the padding value as needed */
      height: 62px; /* Set the height as needed */
      position: absolute;
      top: 100px; /* Adjust the top position as needed */
      left: 0;
      right: 0;
      z-index: 5;
    }
    
    /* Create a line beneath the top navigation bar */
    .main-nav::after {
      content: '';
      position: absolute;
      width: 100%;
      bottom: 20px; /* Adjust the position of the line relative to the logo */
      border-bottom: 1px solid rgba(0, 0, 0, 0.2); /* 20% transparent black */
      z-index: 3; /* Place it below the top navigation bar */
    }
    
    /* Change the color of the font in the navigation bar items */
    #topNav .main-nav ul li a {
      color: #5f5e56;
    }
    
    /* Adjust line height for all headings (h1, h2, h3, etc.) */
    h1, h2, h3, h4 {
      line-height: 1.2; /* Adjust the value to your desired line height */
    }
    
    h1 {
      font-size: 28px; /* Adjust the font size for h1 */
      color: #91847D;
    }
 
  /* 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% - 20px); /* 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: 95%; /* 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-top: 0px; /* You can adjust this as needed */
  }

      .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>

</head>
<body class="landing-page">
  <!-- Add this link around your logo -->
  <div class="logo">
    <!-- Your logo content goes here -->
  </div>

  <div class="product">
    <!-- Product content -->
  </div>
     <div class="footer">
         </div>
</body>
</html>

 

Edited by 2Eyeballs
Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.