How could i add media to my landing page project

HTML-CSS
1

when i added it, it didnt work. could you help me?

2

Could you elaborate a little more?

  • What kind of media did you try to add?
  • How and where did you try to add it?
  • What didn’t work, exactly?

I don’t see anything media-related in your code.

3

sure.

i want to add media kind of when i make smaller size of windows, text that in the body must be red.
i added the img that includes details
btw i’m still working on it so i could changes every minute

24
241080×676 104 KB

4

@media queries should be put outside other selectors.

5

what is that then?

07
071080×676 134 KB

6

You have two conditionals in your @media, you should use and between them.

@media screen and (max-width: 600px) {
...
}
7

could you write that code?

8

I did write. It didn’t work? Please post another screenshot.

9

there is no error but it didnt work as well on the page. body didnt change the color of text to red when i make smaller the size of page

33
331080×676 86.1 KB

10

It should work, but just to be sure put the @media below everything.

Resize the output screen on this example:

11

i checked that out and it works well but for my project, it wont work to. it made color red but wont cover the green

12

Oh I see, you removed the body tag from the media, you actually had it before so that’s why I didn’t notice.

@media screen and (max-width: 600px) {
  body { /* you must specify the selector */
    color: red;
  }
}
1 Like
13

it works!!! thank you so much. but i did try to do that first times why didnt that work?

14

Because the @media was inside the body tag :frowning: