Flex-box question?

HTML-CSS
1

I am attempting to complete the challenge of building a product landing page. I have passed all elements other than “Your Product Landing Page should use CSS Flexbox at least once.”.

I thought I had this covered but apparently, I did not, can someone help me find the errors of my way.
Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy-to-read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

media screen and (min-width: 480px) {
  body {
    background-color: black;
  }
  
body {
font-family: 'Roboto', sans-serif;
background-color:#ffffff;
margin: 0;
padding:0;
}
.main{
  display:flex;
  flex-direction:column;
  max-width:1280px;
  margin:0 auto;
  padding: 0 20px;
  Position:relative;
}




    



.logo{
  display:inline;
  
}

.logo img{
  width: 20%;
  
  
}

#header{
  position:fixed;
  background-color:#ffffff;
}

#nav-bar{
  float:right;
  padding-top: 25px;
  
 
}
#nav-bar ul{
  list-style: none;
  display:inline-block;
   
  
}
 
#nav-bar ul li{
  display:inline-block;
  padding: 5px 5px;
  

  
  
}

#nav-bar ul li a {
  color: #000000;
  font-size: 20px;
  text-decoration: none;
 
  
}

#nav-bar li a:hover {
  background-color: #696969;
  color:#fff;
  padding: 10px 10px;
  border-radius:20px;
}

#intro-section,#ourstory,#products,#contact {
  height:500px;
  display: flex;
  justify-content: center;
  text-align:center;
  padding-top:25px;
}

#financing {
  height:500px;
  display:flex;
  justify-content: center;
  text-align:center;
  padding-top:0px;
}
 
#intro-section{
  background-color: #ffffff;
  padding-top: 100px;
}

#box-1{
  width:40%;
  height;75%;
}

#box-2{
  width:40%;
  height:75%;
}

#intro-image{
    max-width: 600px;
    width: 350px;
    height: 350px;
    background-color: #fff;
    overflow: hidden;
    border-radius: 50%;
   
}
.box2-img {
  max width: 600px;
  width: 100%;
  margin-top:10%;
  margin-left:5%;
}

.intro-title{
  margin-top: 40%;
  font-size: 25px;
  font-weight: 200;
  text-align: center;
  
}
.intro-subtitle{
  
}


#ourstory h2{
  color: #04052e;
  font-weight: bold;
}
#box-3 {

    width: 40%;
    height: 75%;
    margin-top: 5%;
  }

  #box-4 {

    width: 40%;
    height: 75%;
    margin-top: 12%;
}

.videoStory-wrapper{
    height: 300px;
    width: 400px;
    margin: 30px auto;
    padding: 19px;
    border: 1px solid #000;
    border-radius: 20px;
    background-color: #fff;
    color: #04052e;
}



  #box-5 {

    width: 45%;
    height: 100%;
    margin-top: 12%;
}

  #box-6 {

    width: 45%;
    height: 100%;
    margin-top: 12%;
}

 

#box-8{

    width: 30%;
    height: 100%;
    margin-top: 25%;
}



.form {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 250px;
}

.form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 430px;
  width: 100%;
}

.form form input {
  display: block;
}

.form form input:first-child {
  margin-bottom: 20px;
  max-width: 300px;
  background-color: #ffffff;
  padding: 5px;
  width: 100%;
}

.form form input:last-child {
  margin-bottom: 20px;
  background-color: #f1c40f;
  padding: 4px 20px;
  font-weight: bold;
  font-size: 18px;
  border: none;
  border-radius: 4px;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14388.61.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.107 Safari/537.36

Challenge: Build a Product Landing Page

Link to the challenge:

2

where are you closing the media query?

also, as it is at the beginning of your css, any other rule that target the same element will overwrite this

for this, media queries are best put at the bottom of the css

5

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