# Flexbox Landing Page Issue

**URL:** <https://forum.freecodecamp.org/t/flexbox-landing-page-issue/396270>\
**Category:** General\
**Created:** [May 30, 2020, 3:06am UTC](https://forum.freecodecamp.org/t/flexbox-landing-page-issue/396270 "2020-05-30T03:06:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![eastonb120](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/eastonb120/32/136580_2.png) [@eastonb120](https://forum.freecodecamp.org/u/eastonb120)\
**Post date:** [May 30, 2020, 3:06am UTC](https://forum.freecodecamp.org/t/flexbox-landing-page-issue/396270/1 "2020-05-30T03:06:21Z")

</div>

All, I’ve tried to use flexbox with my nav-bar, what am I doing wrong? I’m still getting an error.

[https://codepen.io/eastonb120/pen/XWmvNXp](https://codepen.io/eastonb120/pen/XWmvNXp)

---

<div class="post-metadata">

**Author:** ![OJL](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ojl/32/211484_2.png) [@OJL](https://forum.freecodecamp.org/u/OJL)\
**Post date:** [May 30, 2020, 3:19am UTC](https://forum.freecodecamp.org/t/flexbox-landing-page-issue/396270/2 "2020-05-30T03:19:08Z")

</div>

## 2. My product landing page should have at least one media query.

No media queries detected : expected false to be true AssertionError: No media queries detected : expected false to be true

---

<div class="post-metadata">

**Author:** ![Doug-Luce](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/doug-luce/32/73848_2.png) [@Doug-Luce](https://forum.freecodecamp.org/u/Doug-Luce)\
**Post date:** [May 30, 2020, 4:10am UTC](https://forum.freecodecamp.org/t/flexbox-landing-page-issue/396270/3 "2020-05-30T04:10:36Z")

</div>

The test that is failing is saying you don’t have any CSS media queries, I took a look and didn’t see one in your CSS.

Here is an example.

```auto
@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

```

Media queries allow you to do things like changing the width or height of something depending on screen size. This example sets the `background-color` to light blue when the screen size is less than 600px. You can test that by going into developer tools and clicking on the toggle device toolbar in Chrome.

---

<div class="post-metadata">

**Author:** ![Roma](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/roma/32/112899_2.png) [@Roma](https://forum.freecodecamp.org/u/Roma)\
**Post date:** [May 30, 2020, 2:36pm UTC](https://forum.freecodecamp.org/t/flexbox-landing-page-issue/396270/4 "2020-05-30T14:36:15Z")

</div>

@eastonb120, others have told you why you’re getting an error but so you know, when a test fails you can click on the red button to see which test failed and an error message that will help you to resolve it.  
Hope that helps.

---

<div class="post-metadata">

**Author:** ![eastonb120](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/eastonb120/32/136580_2.png) [@eastonb120](https://forum.freecodecamp.org/u/eastonb120)\
**Post date:** [May 31, 2020, 2:19am UTC](https://forum.freecodecamp.org/t/flexbox-landing-page-issue/396270/5 "2020-05-31T02:19:37Z")

</div>

All,  
I linked the .js test script to a local html file on my machine, and it didn’t detect the flexbox for some reason. I didn’t realize the issue corrected itself when I copied my code over to codepen… Thank you for the help on my non-issue.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 6:51pm UTC](https://forum.freecodecamp.org/t/flexbox-landing-page-issue/396270/6 "2021-06-01T18:51:39Z")

</div>