Responsive Design with @media in CSS

Question

I tried to make my website responsive but it does not work. With @media i want to define different areas but with my code nothing chances.

    @media (max-width: 1400px) {
    #football {
        left: 70%;
        top: 0%;
    }
    
    #skiing {
        left: 70%;
        top: 30%;
    }
    
    #volleyball {
        left: 70%;
        top: 60%;
    }
    
}

Is there something wrong?

Answer 1

Make sure you have the meta tag embedded inside <head> :

html:

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

css:

@media all and (max-width: 1400px){

/* your code */

}

Answer 2

try to define the type

@media all and (max-width: 1400px){
     your code
}

and make sure to add the meta tag in the head tag

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

Answer 3

Make sure to put the media query at the end of your code. Also don't forget to add this meta tag to the head element in html file.

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

By the way try editing query like this:

@media only screen and (max-width: 1400px) {
    #football {
        left: 70%;
        top: 0%;
    }
    
    #skiing {
        left: 70%;
        top: 30%;
    }
    
    #volleyball {
        left: 70%;
        top: 60%;
    }
    
}

Responsive Design with @media in CSS

Question

3 answers

solution1
0 2020-09-25 09:25:49

solution2
0 2020-09-25 09:49:47

solution3
0 ACCPTED 2020-09-25 09:57:08

Responsive Design with @media in CSS

Question

3 answers

solution1 0 2020-09-25 09:25:49

solution2 0 2020-09-25 09:49:47

solution3 0 ACCPTED 2020-09-25 09:57:08

solution1
0 2020-09-25 09:25:49

solution2
0 2020-09-25 09:49:47

solution3
0 ACCPTED 2020-09-25 09:57:08