Product landing page (flexbox)

I have completed the project, however, when the code I run the code its still saying ""should use CSS Flexbox at least once.

@media only screen and (max-width: 1200px){

body{font-family: san-serif;}


position: fixed;

top: 0;

width: 100vw;}

ul li{list-style: none;}

#header-img{width: 250px;

height: 10vh;}

.nav-container{display: flex;

right: 0;

top: 30px;

position: fixed;}

.nav-link{margin-left: 15px;

font-size: 20px;

text-decoration: none;}

#nav-fixed{ background-color: white;

height: 70px;

width: 100vw;

top: 0;

z-index: 5;}

a:hover{text-decoration: none;

color: black;}*/

/* unvisited link */

a:link {

color: black;

text-decoration: none;}

/* visited link */

a:visited {

color: black;

text-decoration: none;}

/* selected link */

a:active {

color: black;

text-decoration: none;}

#down{margin-top: 15vh;}

.flex-container{display: flex;

flex-direction: column;

align-items: center;}

.flex-container form{display: flex;

flex-direction: column;

align-items: center;

max-width: 430px;}

#email #submit{z-index: 1;}

.flex-container form input{display: block;}

#submit{ background-color: yellow;

font-weight: bold;

margin-top: 10px;}

.icon{padding: 40px;

color: #ff8c00;}

.card{display: flex;}

#video{z-index: 1;}

.flex-container2{display: flex;

justify-content: center;

padding: 50px;}

.pricing{display: flex;

flex-direction: column;

width: 100%;}

.card2{margin: 0 auto;

margin-bottom: 15px;

border: 1px solid #000;

max-width: 340px;

width: 100%;

border-radius: 4px;

text-align: center;}

.card2 h2{background-color: #dddddd;

color: black;

padding: 15px 0;

width: 100%;

text-transform: uppercase;

font-weight: bold;

margin: 0;

margin-bottom: 0;}

.card2 strong{font-size: 24px;}

.card2 button{

border: 0;

margin: 15px 0;

background-color: #f1c40f;

padding: 8px 20px;

border-radius: 2px;


font-size: 24px;}

#footer{background-color: gray;

text-align: right;}

.footer-container{display: flex;

justify-content: flex-end;}

.footer-container li a{padding: 10px;}


@media (min-width: 800px) {

#pricing {

flex-direction: row;

align-self: center;


#pricing .card:not(last-child) {

margin-right: 15px;



I’ve edited your post for readability. When you enter a code block into a forum post, 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 (').

Two things:

  • Can you include your HTML as well so we can recreate your project.
  • Do you remember to link the stylesheet into your HTML?

Thank you for my response!

I’m unable to send the full HTML due to this error message

my css is available here:

I think the reason you are failing the flexbox test is because you have all of your CSS inside of media queries. It appears the tests want you to use flexbox as a default without any media queries. I would suggest that you don’t really need the first media query (@media only screen and (max-width: 1200px)). Why would you want to limit this to 1200px? If I just remove that media query and let all of the CSS inside of it just be the default then your product landing page passes for me.

1 Like

Thank you soooooo much!

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