@media isn't working :/ Please help

HTML-CSS
1

Hello everyone! I’m a noob, and mistakes for me is the normal situation, but there is a trick with @media. For some reason, it’s not working and I have no idea why. I tried everything, looked a lot of web resources but still. The test in Codepen shows the error " 1. The element should responsively resize, relative to the width of its parent element, without exceeding its original size.

Try using the “max-width” style property : expected ‘none’ to not equal ‘none’ AssertionError: Try using the “max-width” style property : expected ‘none’ to not equal 'none’"

@media (max-width:700px) {
		.bg1 {
			background-size: 50% 50%;
		}
		.bg3 {
			background-size: 50% 50%;
		}
		.picture {
			width: 20%;
			height: 20%;	
		}
		nav a {
			font-size: 1em;
		}
		.figcaption {
			font-size: 0.5em;
		}
	}
2

Hello and welcome to the forum :slight_smile: It seems like you’re working on the Tribute Page project at the end of Responsive Web Design Certification, if I’m not mistaken? It would really help to give us your entire code (including HTML). If you’re working in CodePen or GitHub, giving us a link to your project would be extremely helpful.

I can tell you in general that in order to pass this test, you don’t necessarily need @media, you can solve it by simply using relative measurements and, as indicated in the test, max-width property. But again, without the full code, it’s hard to give you any specific pointers. So please paste the link to your project here and the community will be better informed to help you :slight_smile:

3

@kristina_v Hello! I would like to share with you, but first, could you tell me how to do that via Codepen?)) Or is it easier to register on Github?
And yeah thank you with that advice, but now it’s a matter of honor, I want that @media working.

4

if I’m not mistaken, when you are on code pen you can just fork your pen (button that looks like a fork and then once it’s forked or saved you can copy the link and paste it here.

I may be wrong though so feel free to correct me.

Cheers

5

Well, I don’t know why it’s so hard for me to understand that “pan”. This is Github https://github.com/spyhere/start-html

6

OK, thank you, now I see :slight_smile: The problem is about where you put your media query. You need to make sure that it’s below the rules you wish to override on certain devices. In your file, the @media declaration is above your .picture declaration, which makes the second one override the first one in all cases. This is why I generally prefer to put all of my media queries at the very bottom. Hope this helps! :slight_smile:

7

Hi, you need to use this code in the head of your html page.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

8

@ [alyrezaqorbany] Hey, I know about this meta, but I didn’t heard about it in challenges that it is mandatory or something like that. But, thank you very much anyway!
@ [kristina_v] Thank you too! I don’t know what exactly was the solution, but I’ve moved (@media) down and added meta and now it works). Thank you again!

1 Like
9

your welcome body. good luck.