Media Query for Product Landing Page

Media Query for Product Landing Page
0

#1

Tell us what’s happening:

I’m having trouble getting my media queries to be recognized for User Story #14 on the Product Landing Page (“My product landing page should have at least one media query”). I thought I had multiple media queries, but I’m not passing that part of the test for some reason.

Your code so far
header {
font-size: x-large;
position: fixed;
top: 0;
min-height: 50px;
max-height: 100px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: white;
@media (max-width: 600px) {
flex-wrap: wrap;
}
}

.logo {
width: 60vw;
@media (max-width: 650px) {
margin-top: 15px;
width: 100%;
position: relative;
}

img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
@media (max-width: 650px) {
margin: 0 auto;
}
}
}
Your browser information:

Version 67.0.3396.99 (Official Build) (64-bit)

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/


#2

Could you post a link to your project, so we can view all the html and css? It is difficult to give you an answer without seeing all the html and all the css used in your project.


#3

Sorry! Here is my project: https://codepen.io/stefanhk31/pen/WKpLMX/?editors=1100

I’ve managed to get the media queries to work. Unfortunately, however, the test suite says I’m passing 15/16 tests, and I don’t know which one I’m missing, as the window that displays all of the test results is not showing properly–here is a screenshot:

47%20PM

I’ll continue to browse around to find what requirement I missed. But if anyone has ideas, I’m all ears. :slight_smile:


#4

You accidentally reformatted the CSS of the ul and li elements of the FCC tests. This is no fault of your own, but a bug in the way the test code CSS is written. To avoid doing reformatting the test results so you can actually see them, change your ul selector to a class by adding a dot in front, so it becomes:

  .ul {
    width: 10vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around; 
  }

Then delete the very first li selector in your CSS section (see below).

li {
  list-style: none;
}

and then add list-style: none; to the other li selector (located after the media query section)

Now add class=“ul” to each ul element you have in your html section.

Finally change the other li selector from:

li {
        list-style: none;
     padding-bottom: 10px;
     padding-right: 50px;
     display: flex;
     flex-direction: column;
     font-size: large;
    }

to the following:

   .ul > li {
        list-style: none;
     padding-bottom: 10px;
     padding-right: 50px;
     display: flex;
     flex-direction: column;
     font-size: large;
    }

The above CSS will only apply the above li CSS to the element with class=“ul” which will be the ul elements.

FYI - I noticed you are missing some semi-colons on a few of your property/value pairs in your CSS definitions. Double check all of them to make sure they all end with a semi-colon, because you could be getting some unexpected results currently.

Once you finally can see the test results, you will find you are failing user story #6.


#5

Thank you so much! The CSS changes you recommended got my Test window working again, and the fix was easy for User Story #6 (just had to add id=“video” to my iframe element).