MEDIA QUERY - confusion

[Brian-Niar]

Your product landing page should use atleast one media query. How do i go about this issue in the legacy responsive web design?

[Cryptic_X]

Please post your code. Cant help you without looking your code.

[Brian-Niar]

[Cryptic_X]

Can you post your full code, it’s difficult to view code from a screenshot.

[Brian-Niar]

<link rel="stylesheet" href="styles.css" media="mediatype">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div id="page-wrapper">

             

  <header id="header">

    <nav id="nav-bar">

      <ul>

        <li><a class="nav-link" href="#features">Features</a></li>

        <li><a class="nav-link" href="#how-it-works">How It Works</a></li>

        <li><a class="nav-link" href="#pricing">Pricing</a></li>

      </ul>

    </nav>

    <div class="logo">

      <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo">

    </div>

           

  </header>

  <div class="container"></div>

  <section id="hero">

    <h2>Handcrafted, home-made masterpieces</h2>

    <form id="form" action="https://www.freecodecamp.com/email-submit">

      <input name="email" id="email" type="email" placeholder="Enter your email address" required="">

      <input id="submit" type="submit" value="Get Started" class="btn">

    </form>

  </section>

  <div class="container">

    <section id="features">

      <div class="grid">

        <div class="icon"><i class="fa fa-3x fa-fire"></i></div>

        <div class="desc">

            </div>

          <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="grid">

        <div class="icon"><i class="fa fa-3x fa-truck"></i></div>

        <div class="desc">

          <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="grid">

        <div class="icon">

          <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>

        </div>

        <div class="desc">

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

    </section>

    <section id="how-it-works">

      <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>

    </section>

    <section id="pricing">

      <div class="product" id="tenor">

        <div class="level">Tenor Trombone</div>

        <h2>$600</h2>

        <ol>

          <li>Lorem ipsum.</li>

          <li>Lorem ipsum.</li>

          <li>Lorem ipsum dolor.</li>

          <li>Lorem ipsum.</li>

        </ol>

        <button class="btn">Select</button>

      </div>

      <div class="product" id="bass">

        <div class="level">Bass Trombone</div>

        <h2>$900</h2>

        <ol>

          <li>Lorem ipsum.</li>

          <li>Lorem ipsum.</li>

          <li>Lorem ipsum dolor.</li>

          <li>Lorem ipsum.</li>

        </ol>

        <button class="btn">Select</button>

      </div>

      <div class="product" id="valve">

        <div class="level">Valve Trombone</div>

        <h2>$1200</h2>

        <ol>

          <li>Plays similar to a Trumpet</li>

          <li>Great for Jazz Bands</li>

          <li>Lorem ipsum dolor.</li>

          <li>Lorem ipsum.</li>

        </ol>

        <button class="btn">Select</button>

      </div>

    </section>

    <footer>

      <ul>

        <li><a href="#">Privacy</a></li>

        <li><a href="#">Terms</a></li>

        <li><a href="#">Contact</a></li>

      </ul>

      <span>Copyright 2016, Original Trombones</span>

    </footer>

  </div>

</div>

[Cryptic_X]

I need your css too, to find the problem

[Brian-Niar]

@media (min-width: 600px) and (max-width: 768px) { body { background-color: #de3163; } } .nav-bar { box-sizing: border-box; } .flex-container { display: flex; flex-direction: row; font-size: 30px; text-align: center; } .flex-item-left { background-color: #f1f1f1; padding: 10px; flex: 50%; } .flex-item-right { background-color: dodgerblue; padding: 10px; flex: 50%; }

[Cryptic_X]

The tests pass for me, try your code in a different browser

[Brian-Niar]

This is the test"PRODUCT LANDING PAGE" it keep failing everytime.

[Cryptic_X]

Are you using a different code from what you gave me?
The tests do pass for me.

If you are using the same code you gave me, can you try in a different browser or in an incognito mode.

[Brian-Niar]

I’m using the same code

[Cryptic_X]

You may want to try your code in a different browser or in incognito mode.

[Brian-Niar]

okay, i’ll try it out.,