Build a Product Landing Page @media

Build a Product Landing Page @media
0

#1

Tell us what’s happening:
There’s a main problem. My @media doesn’t quite work for flex-direction : column. When I look at my codes in CSS, it seems that my @media does not register at all, from the codepen colours.

I also found that in CSS, curly brackets within curly brackets do not work at all.

I tried it in chrome and got the same results. In fact, when I copy pasted the original fcc code into the chrome, I get a bunch of nonsense. I copied every line in firefox and got the same results of nonsense look. I got my page to look close to the test only by making sure each category has only one set bracket.

Besides a few details of looks that I haven’t yet figured out, the main problem turns out to be the @media.

Can someone see what the problem might be?

Your code so far


Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:62.0) Gecko/20100101 Firefox/62.0.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page


#2

Hi @Sheryl,
don’t forget to declare the styles on the intended css selector.
Other than that make sure that your semi colons are being put in the right places.


#3

if you want to declare media queries inside another css selector, you’ll need a preprocessor that supports this.


#4

Thank you @Ethanefung. At least I know where to put my effort in for what is not working and where it is not. I couldn’t tell if the problem was for me to solve and something not up to me, started to So thanks for pointing me to the right direction. thumbs up. I am curious though, is it by intention that fcc put in a sample that when forked would not work the same in codepen without prior warning? And perhaps there also should be prior warning about codepen that not all sample code forked is actually usable there? I suggest to you because you are identified as part of the fcc team.


#5

I’m not sure what you mean by part of the fcc team. If you mean to say that I am a fcc employee you’d be mistaken.

That in mind, when I forked the codepen repo, it came with the preprocessors, so I’m not sure what happened with your copy. Do you recall ever changing your pens settings?


#6

Oh, because your email arrived from ‘Ethanefung ([email protected])’. That’s how I got my assumption you work for them. I guess they meant community.

Arhh! When I first opened codepen and they asked me that question about preprocessors, I didn’t know they meant but assumed it was short cuts and decided to learn properly, so as not to get confused. So I said no. Now I know !

What do you think? Should I learn using preprocessors ? Would it make a difference?

For this landing page project, I’ll continue the single pair curly bracket since I went that way and see if I can figure it out on myself with your tip. Back to the text book!

Thanks a lot !