Failing media queries

HTML-CSS
1

Hello there!
I’m currently working on the product landing project, and I tried using a media query to change the flex direction of a section tag from column to row, at min-width of 711 pxs for mobile first design,but it appears my media query just isn’t responding. Help!
Here’s a link to my pen https://codepen.io/chubibest/pen/JwKPMb the section tag has the id; “money”.

2

Hello there !

If you need help, you should provide us with the means to help you :wink:

post your code or a link to it so that we can find what is wrong

3

My bad, will do, thanks.

4

first of all, you should put all your media queries at the bottom of your css.

It’s much more readable and makes it easier to maintain your code

for ex:

//your css

/* My media Queries */

@media screen and (max-width:711px) {
.item {
      /* write your new rules*/
      }
}

@media screen and (max-width: 250px) {
}

then pay attention to the syntax, because for media queries, it matters a LOT.
Sometimes you put
@media {}
and some other time you write
@media{}

spacing is important, if you don’t put a space in between, it might not work

Start by reorganising your code and check the spacings, it will help you a lot in finding where your mistakes are and might also solve them :wink:

if not, come back here and we’ll see what we can do about it :wink:

good luck and merry christmas :slight_smile:

1 Like
5

You are missing the unit on the value in the media query

// You have
@media (min-width: 711)
// Should be
@media (min-width: 711px)
  1. Formatting is very important, be mindful of it always.

Use Codepen’s Tidy function to get some help with the formatting.
Using the same menu, use Analyze to check for errors.

Here shown with the HTML code box, but all the code boxes have this dropdown menu (HTML, CSS, and JS)
https:/uploads/default/original/3X/5/2/5290b6db392b36e746ff1a95cce447a73545a656.png

6

Thanks stanparis15 and lasjorg, to think I was stuck and frustrated for days because of a missing unit. Your Advice is well appreciated and duly noted.
Merry Christmas.