Media Query Doesn't Work - Build A Survey Form

1

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:

2

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.

3

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.

4

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.

5

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.

6

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)