Responsive Web Design Projects - Media Query Problem


I have finished my Technical Documentation Page. I have been doing these projects on my local computer not on the Codepen (because i work in an offline environment so i don’t have a choice. I downloaded and run the test on my local) . In the Product Landing Page and Technical Documentation Page, the use-cases requires me to implement an at least one media-query to the CSS. And i did and it worked perfectly. As the site changes its layout once you resize the browser. But the media-query test wouldn’t pass.

When i got a chance to go online, I tried to do copy the code to the Codepen and VOILA! It passed. I didn’t do anything besides copy/paste. I didn’t believe my eyes and run the tests on my local files. It didn’t pass the only media query test.

Can someone explain what might happen here?

Thanks in advance.

When you are on a dekstop screen, it fails test number 1 under Layout. Because you set up
your first media query to handle everything up to a width of 1500px, it was failing the test. You do not even need the first media query. Just leave the CSS selectors you have inside and do not surround them with the media query syntax. Why? Because your normal CSS will handle anything over 750px in width and the 2nd media query will handle what happens at 750px and narrower.

  1. On regular sized devices (laptops, desktops), the element with id=“navbar” should be shown on the left side of the screen and should always be visible to the user. AssertionError: Left of bounding rectangle is not correct.: expected 7.986111640930176 to be below -926.4722900390625

I was doing it like you said. But i changed it to the 1500 thing to pass the test.

Thanks anyway

1 Like

You would have passed the test if you did what I said. If your code did not pass, then it is because you did not implement what I suggested correctly. I would have to see what you tried which did not pass to know what you did differently than I suggested.

I have several media queries (at 322, 424, and 769), and they do not pass on the laptop in local host but they do when I deploy to surge. They also work on CodePen. Might be a problem with the tests and localhost.


Same here. The test was not passing on my local copy. But it passes when I upload to Github / Codepen.

1 Like