Can someone help me with first course's third project?

Hi, i couldn’t manage to set media query to my project can someone help? Here’s the full code;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Product Landing Page</title>
  <script src="https://kit.fontawesome.com/52822dfdaf.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;900&family=Poppins&display=swap');

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background: rgb(249, 243, 238);
      font-family: 'Radio Canada', sans-serif;
      line-height: 1.3;
    }

    header {
      position: fixed;
      width: 100%;
      top: 0;
      min-height: 80px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      background-color: rgb(249, 243, 238);
      z-index: 1;
    }

    .nav-brand {
      width: 60vw;
    }

    #brand-logo {
      width: 100%;
      height: 100%;
      max-width: 300px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      margin-left: 20px;
    }

    nav {
      border-bottom: none;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

    ul {
      list-style-type: none;
      display: flex;
      justify-content: flex-end;
    }

    .nav-link {
      color: #000;
      margin-right: 60px;
    }

    .all-container {
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
    }

    .upper-container {
      margin: 70px;
      text-align: center;
      padding-top: 20px;
    }

    .header {
      font-weight: bold;
      font-size: 1.4rem;
    }

    input [type="submit"] {
      text-align: center;
    }

    #email {
      display: block;
      width: 50%;
      margin: 15px auto;
      max-width: 280px;
      padding: 5px 5px;
    }

    #submit {
      border: none;
      background-color: #EFD345;
      font-weight: 900;
      font-size: 20px;
      padding: 0 20px;
      border-radius: 2px;
    }

    .col {
      display: flex;
      justify-content: center;
    }

    .logo {
      display: flex;
      align-items: center;
      color: darkorange;
      justify-content: center;
      height: 100px;
      width: 12vw;
    }

    h2 {
      font-weight: bold;
      font-size: 1.2rem;
    }

    .texts {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 120px;
      width: 69vw;
      padding: 5px;
      text-align: left;
    }

    #Features {
      margin-bottom: 30px;
    }

    .video {
      text-align: center;
    }

    #Pricing {
      margin-top: 60px;
      display: flex;
      flex-direction: row;
      justify-content: center;
    }

    .price-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      width: calc(100% / 3);
      margin: 10px;
      border: 1px solid;
      border-radius: 3px;
    }

    .price-head {
      background-color: rgb(208, 201, 192);
      padding: 15px 0;
      text-align: center;
      font-size: 1rem;
      font-weight: 700;
      width: 100%;
    }

    .card-price {
      margin-top: 15px;
    }

    .price-text {
      margin: 10px 0;
    }

    button {
      text-transform: uppercase;
      border: none;
      background-color: #EFD345;
      border-radius: 2px;
      height: 40px;
      padding: 0 20px;
      margin-bottom: 15px;
    }

    footer {
      margin-top: 30px;
      background-color: rgb(208, 201, 192);
    }

    a {
      color: #000;
      text-decoration: none;
    }

    a:hover {
      color: #000;
    }

    a::after {
      color: #000;
    }

    footer {
      padding: 20px;
    }

    .footer-list {
      display: flex;
      justify-content: flex-end;
    }

    .footer-link {
      padding: 0 10px;
    }

    span {
      display: flex;
      justify-content: flex-end;
      margin-top: 5px;
      font-size: 0.9rem;
    }
  </style>
</head>

<body>
  <header>
    <div class="nav-brand">
      <img id="brand-logo" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="">
    </div>
    <nav id="nav-bar">
      <ul>
        <li class="nav-link"><a href="#Features">Features</a></li>
        <li class="nav-link"><a href="#Howitworks">How It Works</a></li>
        <li class="nav-link"><a href="#Pricing">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <div class="all-container">
    <div class="upper-container">
      <h2 class="header">Handcrafted, home-made masterpieces</h2>
      <form action="https://www.freecodecamp.com/email-submit">
        <input id="email" type="email" name="email" placeholder="Enter your email adress" required>
        <input id="submit" type="submit" name="submit" value="GET STARTED">
      </form>
    </div>
    <section id="Features">
      <div class="container">
        <div class="col">
          <div class="logo">
            <i class="fa-solid fa-3x fa-fire-flame-curved"></i>
          </div>
          <div class="texts">
            <h2>Premium Materials</h2>
            <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
          </div>
        </div>
        <div class="col">
          <div class="logo">
            <i class="fa-solid fa-3x fa-truck"></i>
          </div>
          <div class="texts">
            <h2>Fast Shipping</h2>
            <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
          </div>
        </div>
        <div class="col">
          <div class="logo logo3">
            <i class="fa-solid fa-3x fa-battery-full"></i>
          </div>
          <div class="texts">
            <h2>Quality Assurance</h2>
            <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
          </div>
        </div>
      </div>
    </section>
    <section id="Howitworks">
      <div class="video">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/iKCMVRJGx38" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen></iframe>
      </div>
    </section>
    <section id="Pricing">
      <div class="price-card">
        <div class="price-head">TENOR TROMBONE</div>
        <h2 class="card-price">$600</h2>
        <div class="price-text">
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum dolor.</p>
          <p>Lorem ipsum.</p>
        </div>
        <button type="button">Select</button>
      </div>
      <div class="price-card">
        <div class="price-head">BASS TROMBONE</div>
        <h2 class="card-price">$900</h2>
        <div class="price-text">
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum.</p>
          <p>Lorem ipsum dolor.</p>
          <p>Lorem ipsum.</p>
        </div>
        <button type="button">Select</button>
      </div>
      <div class="price-card">
        <div class="price-head">VALVE TROMBONE</div>
        <h2 class="card-price">$1200</h2>
        <div class="price-text">
          <p>Plays similar to a Trumpet</p>
          <p>Great for Jazz Bands</p>
          <p>Lorem ipsum dolor.</p>
          <p>Lorem ipsum.</p>
        </div>
        <button type="button">Select</button>
      </div>
    </section>
    <footer>
      <ul class="footer-list">
        <li class="footer-link"><a href="#">Privacy</a></li>
        <li class="footer-link"><a href="#">Terms</a></li>
        <li class="footer-link"><a href="#">Contact</a></li>
      </ul>
      <span>Copyright 2016, Original Trombones</span>
    </footer>
  </div>
</body>

</html>

Hi @enesurasmdl !

Welcome to the forum!

It would be better to share a link to your codepen so we can see the issue better.

I quickly glanced at your code and I don’t see any media queries.

Can you show us what you have tried?

i deleted my medias because i couldn’t manage to do it right. Here’s my codepen, navbar brand making the issues.

Can you explain what you are trying to achieve?
Why are you creating a media query?
Can you show us what you tried even if it isn’t right?
You can comment it out if you want, but I don’t know what you are trying to do.

It looks like you are trying to follow the fcc sample but their html structure is a little bit different than yours.
That is why you are getting different results and the navbar is not working the way it should.

But I would encourage you to not recreate the sample but rather but your own project because you will have a better understanding of the code.

Hope that helps!

He is using media queries to Ensure that his site also looks good on mobile

That part I understand :slight_smile:

But I need the OP to provide more information on what the issue is.

What have they tried so far?
What elements are they trying to apply the media queries to?
What do they mean by it is not working?

The more information the OP provides the more responses they will get to their post

Thanks I understand now

1 Like

my navbar is the problem when i’m downsizing the screen. navbar-links and navbar-brand overlapping.

For smaller devices you can set a media query to show the navlinks in a column instead of a row. Maybe @media (max-width: 600px) you can set that change.

I messed around with your code a little bit and was able to get the navlinks in a column.

I would first suggestion getting rid of the style tags and moving all of your css into the css section. That is going to make debugging much easier for you.

You can also get rid of flex-direction:row; here because the default is already set to row.

nav {
      border-bottom: none;
      display: flex;
      flex-direction: row;
      justify-content: space-around;
    }

If you are still stuck you might need to remove the css you have for the navbar and start again. Sometimes rebuilding that section is easier than trying to fix the issues.

Hope that helps!

1 Like

You can also use flex-wrap.

Remove the width on the image wrapper, add flex-wrap: wrap to the flexbox containers and let the flex items wrap. You will have to make some adjustments to the margin/padding of a few elements if you want everything to be centered.

You also have Bootstrap but you do not seem to really be using it and some of the Bootstrap styles may need to be overwritten. This also depends on where the CSS is located, e.g. if you move your CSS to the CSS codebox you can see a difference from how it looks with the CSS in the style element (because of how styles are overwritten).

Here is an example of wrapping the flex items. I also move the CSS out of the HTML.

1 Like

Thank you, I appreciate your help!

Thank you, It will help.