Media Query Doesn't Work - Build A Survey Form

Hi all,

Here is my project in codepen, with the source code: https://codepen.io/riz205/full/EGwjaP

My media query @media (min-width: 361px) and (min-height: 641px) and (max-width: 412px) and (max-height: 732px) doesn’t work.

The only css in this media query is #survey-form { font-size: 0.1px;...}

But the survey-form font-size isn’t changing when I change the size of my viewport to 411px x 731px, in Google Chrome (via the ‘inspect’ option in Google Chrome).

Before posting this, I tried:

  1. To google the problem. I came across numerous articles analysing whether using min-width or max-width is best practice. This didn’t really help me.

  2. Tried changing the survey-form's font-size value to all kinds of em and px values, but the rendered font-size within the survey-form didn’t change once.

  3. Looking over all of my code for any syntactical errors, but I have not spotted any.

I think part of why I am struggling to find a solution is that I do not know what to search for in Google. If anyone can help I really would appreciate it.

Thanks!

And Happy New Year! :slight_smile:

Take a look at line 181:
@media (max-width: 360px) and (max-height: 640px){
This media query doesn’t have a closing curly brace, hence, the linter is throwing an Unclosed block error.

Hi

I must have accidentally deleted that closing curly brace when I was cleaning up the code prior to posting the problem in the FCC forums.

I have added the closing curly brace. The problem, as described above in my first post in this thread, still stands.

Mind you explain the reasoning of the conditional statements on your nested media query? It worked for me after I put it outside from the former media query scope.

I am using media queries to ensure that the website is well-designed when viewed through various mobile-phone screens (or viewports).

If you go to your Google Chrome’s ‘inspect’ function and open the viewport simulator, you will see that I chose the same width and height resolutions of Chrome’s mobile viewports, mostly so I can begin to get to grips with mobile website-development.

If you’re looking to fit everything on the screen at once. Use ‘vh’ for height and ‘vw’ for width, you have to also include :

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

within the section of your html page. Also, IMO I think adding conditional statements for height is not that convenient in this case, I would leave just the width instead in order to resize fonts.
In my [Survey Form challenge], I used media queries to change checkboxes flex directions and convert them into blocks when displayed in lower resolutions. (https://codepen.io/Sharkantropo/pen/aavyGO)