Product Landing page media query and flexbox

HTML-CSS
1

I have used both flex-box and and media queries in my project but the test conditions of using both of them are not satisfied…

This is the media query

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

    #pricing{

        flex-direction: column;

        align-items: center;

    }

}

This is the flexbox utilisation

#pricing{

    display: flex;

    justify-content: space-evenly;

    border: 2px solid black;

    width: 85vw;

    margin: 0 auto;

    padding: 20px;

}

.pricing-card{

    display: flex;

    flex-direction: column;

    width: 300px;

    justify-content: center;

    align-content: center;

    border: 1px solid black;

    padding-bottom: 10px;

    margin: 10px;

}
2

please give your project link with the test suite, so it’s possible to see what’s going on

3

Here

https://codepen.io/mudbloodlad/pen/rNMLxzW

4

all tests pass for me, what issue do you have?

1 Like
5

I dont understand the issue , I am running my code in vscode and 14/16 test cases are passed but in codepen it is fine …

6

When testing locally you have to serve the page. You can use the Live Server extension.

1 Like
7

I am actually testing the page in chrome by dragging the index.html file , whenever I change something in the code I just refresh the page in chrome .
I have finished most of my projects in the same way and have passed all the test cases but in this project , the media query and flexbox test cases are not passing when using vscode

8

working fine with live server, Thanks!

1 Like