Product landing page - Media Query and Flex not working

HTML-CSS
1

Ok so here’s the deal I have a problem with the Product landing page, I cannot pass for the life of me this 2 mistakes

  • My product landing page should have at least one media query.
  • My product landing page should utilize CSS flexbox at least once.

I get this message:

Problem
Problem1430×879 68.2 KB

The things is that I have multiple flexbox usages throughout the code, for example: the whole page is centered with flexbox technique I call FlexHV centering,
Example in my #nav-bar ul I used this:

#nav-bar ul {
list-style-type: none;
margin: 0;
padding: 30px 0;
overflow: hidden;
background-color: rgba(51, 51, 51, 0.212);
display: flex;
justify-content: space-around;
align-items: center;
transition: 0.2s;
}

Which Clearly shows that flex and centering is used and all that good stuff,
About the media queries, that’s just purely obvious used it, I will share my codepen, when you get width of 500px or less, you will experience mulitple changes like things getting smaller, and also the navbar changing from spaced-out to center, and being aligned, etc…

CodePen link: https://codepen.io/IvanoskiHarmonia/pen/QWqGLNB

Ok when I transffered my code in codepen, everything worked, so all and all, the backend for this particular page does not work ok VSCode only, if this can be fixed, I will be really grateful,

Sorry for the long dragging post.

1 Like
2

The page needs to be served for the tests to pass locally. You can use the Five server VS Code extension, or some other local server to serve the page.

3

Do you think it will work with node server?

The problem is that the other tests passed locally like the first 2 project problems.

4

The need for the page to be served is specific to the two requirements. It has to do with how the test works.

Any web server should work but if you are using VS Code I would suggest using the extension. It’s just a handy extension to have anyway.

5

Yeah I use something similar, but I will install this one too just in case.

6

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