Media Query for Product Landing Page

HTML-CSS
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/

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:

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