Missing flexbox? - product landing page

HTML-CSS
1

I know that this question has already been asked a couple of times, but I don’t think these solutions really apply here? my landing page is ready, and I think that I used flexbox properly once in each media query already, for example here:

.flex-container{
    display: flex;
    flex-wrap: no-wrap;
    width: 100%;
    justify-content: space-evenly;
  }

and this simpler version (if that counts)

 #video{
    width:100%;
    height:30%;
    display: flex;
  }

right now, I’m improving my own projects, and it already passed it in the past a couple of times when I only used the display: flex things a couple of times, and now it doesn’t, even though I added the examples from above? help would be appreciated : )

Your code so far

<!DOCTYPE html>
<html>
  <link rel="stylesheet" href="styles.css"></link><header id="header">
  
  <title>The Flower Project</title>
    
    <img id="header-img" src="https://i.pinimg.com/originals/60/61/2e/60612eb4ffbb39cfea9f9bb750f9e155.jpg"/>
    <nav id="nav-bar"> 
      <a class="nav-link"href="#introduction">Introduction</a>
      <a class="nav-link"href="#prices">Prices</a>
      <a class="nav-link"href="#campaign">Campaign</a>
    </nav>
    <h1>The Flower Project</h1>
  </header>
  <main id="main">
    <section id="introduction">
      <h3 class="greeting">Hello!</h3>
      <img id="profile" src="https://images.unsplash.com/photo-1611432579699-484f7990b127?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OHx8d29tYW4lMjBzbWlsZXxlbnwwfHwwfHw%3D&w=1000&q=80"/><p class="intro">My name is Melissa and since 2018, I've been running this Flowershop. I want to take this opportunity to introduce my services:
        Here, at The Flower Project, we offer </p>
      <ul><li>floral bouquets</li><li>wedding, </li><li>birthday, or</li><li>funeral arrangements</li></ul>
      <p class="intro">and so much more! In short, we are able to support every occasion and do our best to respond to individual wishes. </p>
    </section>
    <hr/>
    <quote id="quote"><p>Local.</p><br/><p>Organic.</p><br/><p class="i">Compassionate.</p></quote><hr/>
    <div class="grid">
    <div><img class="portrait" src="https://i.pinimg.com/474x/be/02/31/be0231c0f7790d9a1d1c7939207c656f.jpg"/></div>
    <div><img class="portrait" src="https://i.pinimg.com/564x/19/71/18/19711810204330fe4287e682c6bfe60a.jpg"/></div>
    <div><img class="portrait" src="https://i.pinimg.com/474x/3a/0f/3e/3a0f3e7b7f0e4714239f46ae9bd7708d.jpg"/></div>
    <div><img class="portrait" src="https://i.pinimg.com/564x/b5/45/30/b54530852b6ccf27b3eb128ec1d0e143.jpg"/></div>
    <div><img class="portrait" src="https://i.pinimg.com/564x/01/16/64/011664b2eb2573f1918341cca3e15fd1.jpg"/></div>
    <div><img class="portrait" src="https://i.pinimg.com/564x/91/d2/30/91d2308ae12a98ce8bd5b556a128908c.jpg"/></div>
    <div><img class="portrait" src="https://i.pinimg.com/564x/8d/eb/4c/8deb4ce357d983062828a202d4ce0866.jpg"/></div>
    <div><img class="portrait" src="https://i.pinimg.com/564x/a1/1f/94/a11f947e658447bde1f7cba4312d7c75.jpg"/></div>
    <div><img class="portrait" src="https://i.pinimg.com/564x/b0/31/ad/b031ad25976f490f20fc011ff02f5250.jpg"/></div>
  </div><hr/>
    <section class="flex-container" id="prices">
      <div class="box" id="small_bouquet"><h3>Small bouquets</h3><p>Contain 10-15 flowers of choice, plus usual flower foundation</p><p>Same-day delivery possible</p><p class="price"><strong>30£</strong></p></div>
      <div class="box" id="large_bouquet"><h3>Large bouquets</h3><p>Contain about 30 flowers of choice, plus usual flower foundation</p><p>Same-day delivery possible if within 20mile radius</p><p class="price"><strong>55£</strong></p></div>
      <div class="box" id="wreath"><h3>Wreaths</h3><p>Heart- or ring-shaped (diameter: 30cm). Basic flower foundation, accent flowers of choice.</p><p>Same-day delivery possible</p><p class="price"><strong>60£</strong></p></div>
     </section> <div class="new_box" id="additional"><p>For <strong>15£</strong>, we offer <i>Priority handling</i>: your order will be done within the hour (doesn't apply to Arrangements for special occasions)</p></div><hr/>
    <iframe id="video" width="480" height="300" src="https://www.youtube.com/embed/N_61_oXmfvQ" frameborder="0"  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"  allowfullscreen controls></iframe><br/><br/>
    <form action="https://www.freecodecamp.com/email-submit"id="form">
      <label>If you want to receive updates about our shop, feel free to leave your email here!</label><br/><br/><input name="email"type="email" id="email" placeholder="Your email here"/>
      <input id="submit" type="submit"></input>
    </form>
  </main>
  <hr class="div"/>
  <footer id="campaign">
    <div id="address">128 Main Road<br/>Whoville<br/>United Kingdom
    </div>
  </footer>
</html>
  

@media (max-width: 650px){
  *{
    background-color: white;
  }
  #nav-bar{
  position: top;
  background-color: black;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  }
  .nav-link{
    color: #F97698;
    background-color: black;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #main{
    padding: 10px;
    background-color: white;
    border: 4px solid black;
    font-family: Montserrat;
    font-size: 3vw;
  }
  h1{
    font-family: Optima;
    font-size: 10vw;
    padding: 10px;
    text-align: center;
  }
  .flex-container{
    display: flex;
    flex-wrap: no-wrap;
    width: 100%;
    justify-content: space-evenly;
  }
  #header-img{
    height: 20%;
    width: 100%;
  }
  
  #introduction{}
  .greeting{}
  .intro{}
  #profile{
    width: 60%;
    border-radius: 100% 100% 100% 100%;
    margin-left: 16vw;
    margin-right: 16vw;
  }
  #quote{
    font-family: Optima;
    font-weight:bold;
    font-size: 5vw;
    text-align: center;
    line-height: 0px
  }
  .box{
    padding: 5px;
    margin: 10px;
    border: 1px solid gray;
    width: 33%;
  }
  #video{
    width:100%;
    height:30%;
    display: flex;
  }
  #form{}
  .div{}
  .i{
    font-style: italic;
  }
  #campaign{
    text-align: center;
    font-family: monospace;
    font-size: 3vw;
  }
  h3{
    background-color: #F97698;
    padding: 2vw 0vw 2vw 0vw;
    text-align: center;
    font-family: Optima;
    font-size: 5vw;
  }
  #prices h3{
    font-size: 4vw;
    text-align: center;
  }
  #prices{
    text-align: center;
  }
  .new_box{
    text-align: center;
  }
  #email{
    width: 100%;
    margin-bottom: 2px;
  }
  .grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 2fr 2fr 2fr;
    grid-gap: 0.7vw;
    padding: 5vw;
  }
  #submit{
    width:100%;
    height: 5%;
    background-color: black;
    color: #F97698;
  }
  .grid div {
    width: 100%;
    height: 100%;
    background: white;
  }

  .grid div:last-child:nth-child(3n - 1) {
    grid-column: span 2;
    height: auto;
    padding-bottom: 0;
  }
  .portrait {
    float:left;
    width:25vw;
    height:25vw;
overflow:hidden;    
    }
  .portrait img {
    width:25vw;    
    height: auto;   
  }
}
@media only screen and (min-width: 650px) and (max-width: 900px){
  *{
    background-color: white;
  }
  #nav-bar{
  position: top;
  background-color: black;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  }
  .nav-link{
    color: #F97698;
    background-color: black;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #main{
    padding: 10px;
    background-color: white;
    border: 2px solid black;
    font-family: Montserrat;
    font-size: 2vw;
  }
  h1{
    font-family: Optima;
    font-size: 7vw;
    padding: 10px;
    text-align: center;
  }
  .flex-container{
    display: flex;
    flex-wrap: no-wrap;
    width: 100%;
    justify-content: space-evenly;
  }
  #header-img{
    height: 20%;
    width: 100%;
  }
  
  #introduction{}
  .greeting{}
  .intro{}
  #profile{
    width: 60%;
    border-radius: 100% 100% 100% 100%;
    margin-left: 16vw;
    margin-right: 16vw;
  }
  #quote{
    font-family: Optima;
    font-weight:bold;
    font-size: 5vw;
    text-align: center;
    line-height: 0px
  }
  .box{
    padding: 5px;
    margin: 10px;
    border: 1px solid gray;
    width: 33%;
  }
  #video{
    width:100%;
    height:40%;
  }
  #form{}
  .div{}
  .i{
    font-style: italic;
  }
  #campaign{
    text-align: center;
    font-family: monospace;
    font-size: 2vw;
  }
  h3{
    background-color: #F97698;
    padding: 1vw 0vw 1vw 0vw;
    text-align: center;
    font-family: Optima;
    font-size: 3vw;
  }
  #prices h3{
    font-size: 2.5vw;
    text-align: center;
  }
  #prices{
    text-align: center;
  }
  .new_box{
    text-align: center;
  }
  #email{
    width: 100%;
    margin-bottom: 2px;
  }
  .grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 2fr 2fr 2fr;
    grid-gap: 0.7vw;
    padding: 5vw;
  }
  #submit{
    width:100%;
    height: 5%;
    background-color: black;
    color: #F97698;
  }
  .grid div {
    width: 100%;
    height: 100%;
    background: white;
  }

  .grid div:last-child:nth-child(3n - 1) {
    grid-column: span 2;
    height: auto;
    padding-bottom: 0;
  }
  .portrait {
    float:left;
    width:25vw;
    height:25vw;
    overflow:hidden;    
    }
  .portrait img {
    width:25vw;    
    height: auto;   
  }
}
@media only screen and (max-width: 1300px) and (min-width: 900px){
  *{
    background-color: white;
  }
  #nav-bar{
  position: top;
  background-color: black;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  }
  .nav-link{
    color: #F97698;
    background-color: black;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #main{
    padding: 10px;
    background-color: white;
    border: 4px solid black;
    font-family: Montserrat;
    font-size: 2vw;
  }
  h1{
    font-family: Optima;
    font-size: 4vw;
    padding: 10px;
    text-align: center;
  }
  .flex-container{
    display: flex;
    flex-wrap: no-wrap;
    width: 100%;
    justify-content: space-evenly;
  }
  #header-img{
    height: 30%;
    width: 100%;
  }
  
  #introduction{}
  .greeting{}
  .intro{}
  #profile{
    width: 30%;
    border-radius: 100% 100% 100% 100%;
    margin-left: 32vw;
    margin-right: 16vw;
  }
  #quote{
    font-family: Optima;
    font-weight:bold;
    font-size: 3vw;
    text-align: center;
    line-height: 0px
  }
  .box{
    padding: 5px;
    margin: 10px;
    border: 1px solid gray;
    width: 33%;
  }
  #video{
    width:100%;
    height:60%;
  }
  #form{}
  .div{}
  .i{
    font-style: italic;
  }
  #campaign{
    text-align: center;
    font-family: monospace;
    font-size: 2vw;
  }
  h3{
    background-color: #F97698;
    padding: 1vw 0vw 1vw 0vw;
    text-align: center;
    font-family: Optima;
    font-size: 2vw;
  }
  #prices h3{
    font-size: 2vw;
    text-align: center;
  }
  #prices{
    text-align: center;
  }
  .new_box{
    text-align: center;
  }
  #email{
    width: 100%;
    margin-bottom: 2px;
  }
  .grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 2fr 2fr 2fr;
    grid-gap: 0.7vw;
    padding: 5vw;
  }
  #submit{
    width:100%;
    height: 5%;
    background-color: black;
    color: #F97698;
  }
  .grid div {
    width: 100%;
    height: 100%;
    background: white;
  }

  .grid div:last-child:nth-child(3n - 1) {
    grid-column: span 2;
    height: auto;
    padding-bottom: 0;
  }
  .portrait {
    float:left;
    width:25vw;
    height:25vw;
    overflow:hidden;    
    }
  .portrait img {
    width:25vw;    
    height: auto;   
  }
}
@media only screen and (min-width: 1300px){
  *{
    background-color: white;
  }
  #nav-bar{
  position: top;
  width: 60%;
  background-color: black;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
  margin-left: 20vw;
  }
  .nav-link{
    color: #F97698;
    background-color: black;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #main{
    padding: 2vw;
    background-color: white;
    border: 4px solid black;
    font-family: Montserrat;
    font-size: 1vw;
    margin-left: 12vw;
    margin-right: 12vw;
  }
  h1{
    font-family: Optima;
    font-size: 3vw;
    padding: 10px;
    text-align: center;
  }
  .flex-container{
    display: flex;
    flex-wrap: no-wrap;
    width: 100%;
    justify-content: space-evenly;
  }
  #header-img{
    height: 20%;
    width: 60%;
    margin-left: 20vw;
  }
  
  #introduction{}
  .greeting{}
  .intro{}
  #profile{
    width: 30%;
    border-radius: 100% 100% 100% 100%;
    margin-left: 21vw;
    margin-right: 16vw;
  }
  #quote{
    font-family: Optima;
    font-weight:bold;
    font-size: 2vw;
    text-align: center;
    line-height: 0px
  }
  .box{
    padding: 5px;
    margin: 10px;
    border: 1px solid gray;
    width: 33%;
  }
  #video{
    width:100%;
    height:60%;
  }
  #form{}
  .div{}
  .i{
    font-style: italic;
  }
  #campaign{
    text-align: center;
    font-family: monospace;
    font-size: 1vw;
  }
  h3{
    background-color: #F97698;
    padding: 1vw 0vw 1vw 0vw;
    text-align: center;
    font-family: Optima;
    font-size: 2vw;
  }
  #prices h3{
    font-size: 2vw;
    text-align: center;
  }
  #prices{
    text-align: center;
  }
  .new_box{
    text-align: center;
  }
  #email{
    width: 100%;
    margin-bottom: 2px;
  }
  .grid {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr;
    grid-template-rows: 2fr 2fr 2fr;
    grid-gap: 0.7vw;
    padding: 0vw;
  }
  #submit{
    width:100%;
    height: 5%;
    background-color: black;
    color: #F97698;
  }
  .grid div {
    width: 80%;
    height: 80%;
    background: white;
  }

  .grid div:last-child:nth-child(3n - 1) {
    grid-column: span 2;
    height: auto;
    padding-bottom: 0;
  }
  .portrait {
    float:left;
    width:18vw;
    height:18vw;
    overflow:hidden;    
    }
  .portrait img {
    width:25vw;    
    height: auto;   
  }
}

edit: so this is my entire code
Your browser information:

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

Challenge: Product Landing Page - Build a Product Landing Page

Link to the challenge:

2

Just checking. Are all of those rule sets supposed to be in the media query? Is this CSS in the “styles.css” editor?

Also, we probably need your HTML as well so we can test this for ourselves.

3

just added both html and the entirety of the css code. yes, all this was just one media query and I think I have like 4/5 of them each with slight changes. could this be a problem?

and yes, this was all from the styles.css editor here on freecodecamp

4

I think the tests want the use of flexbox to be in the default CSS, outside of any media query. So you’ll either need to remove one of those media queries and make it your default CSS (I would recommend the first one) or you can create a new rule set outside of the existing media queries and use flexbox in that.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.