Product Landing Page - Build a Product Landing Page

[humayl.khan.210]

Tell us what’s happening:

there is nothing wrong with the actual challenge I am struggling to make my code work is it not allowed to ask for help I don’t know
i am doing a project for my responsive web cert. I am making a website using a grid display but 2 of my sections are overlapping I’ve tried everything I can think of including AI) but nothing helps can someone run this code and see what the problem is

PS I am making a bike product page so that will explain some things

Your code so far

<!-- file: index.html -->

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Challenge Information:

Product Landing Page - Build a Product Landing Page

freeCodeCamp.org

[ILM]

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[humayl.khan.210]

here’s the code

<section id="features">
    <h2>Features</h2>
    <div class="info-card">
      <img class="icon" src"https://www.svgrepo.com/show/529207/shield.svg" alt="Shield icon">
      <div class="card-text">
        <h2>Durable</h2>
        <p>Lite bikes can withstand crashs, impacts and anything you throw at it with hard rubber tires, and a titanium
          frame</p>
      </div>
    </div>
    <div class="info-card">
      <img src"https://www.svgrepo.com/show/503416/map-marker-multiple.svg" alt="map marker icon">
      <div class="card-text">
        <h2>Portable</h2>
        <p> Lite bikes are light for a reason you can fold to a 1/3 of their orignal size</p>
      </div>
    </div>
    <div class="info-card">
      <img src"https://www.svgrepo.com/show/444878/bike-city.svg" alt="fast biker icon">
      <div class="card-text">
        <h2><i>\__Fast<i></h2>
          <p>the bikes are careful designed to be aerodynamic and sports-grade gears</p>
        </div>
      </div>
      <div class="info-card">
       <img src"https://www.svgrepo.com/show/485927/tools.svg" alt="Tools icon">
        <div class="card-text">
          <h2>Customizable</h2>
          <p>it also comes with a attachment hoister so you can add a bottle holder, phone stand, bike tracker etc</p>
        </div>
      </div>
    </section>
    <div class="divider"></div>

CSS for all elements relating to the HTML above

body {
  font-family: verdana, Open Sans;
  font-size: 20px;
  background: linear-gradient(180deg, rgba(175, 230, 255, 1) 0%, rgba(90, 202, 253, 1) 50%, rgba(59, 111, 244, 1) 100%);
  min-height: 100vh;
  margin: 1%;
}

.divider {
  background-color: black;
}

section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 600px) {
  section {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, minmax(100px, auto)); 
  }
}

#features {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: repeat(5, auto);
  gap: 10px;
}

#features .info-card {
  display: contents;
}

#features img {
  grid-column: 1 / 2;
  width: 100%;
  align-self: start;
}

#features h2 {
  grid-column: 2 / 2;
  margin: 0;
  align-self: start;
}

#features p {
  grid-column: 2 / 2;
  margin: 0;
  align-self: start;
}

hope this helps

[Teller]

Hi @humayl.khan.210

Try changing the value from contents to grid instead.

@humayl.khan.210

#features .info-card {
  display: contents;
}

Happy coding

[humayl.khan.210]

that worked slightly but now everything not in line…

its fine honestly I’ve spent so much time on this one bit that doesn’t really matter ill just delete the point at the bottom. thanks for helping anyway