Question 44589 in Html Question posted in
Some basic documentation can be found here.

Media queries css for more than 800 width devices – Html

I am trying to adjust the size screen from desktop to mobile in Visual Studio Code. The question is: modify the CSS by using media queries, so if the viewport is more than 800px it should display like this:

enter image description here

and if less than 800px it should display like this:

enter image description here

That’s how I did it, but I guess it’s wrong:

@media screen and (max-width: 600px)


{

}
#container {


    width: 100%;
    margin:auto;
   
}
#header {


    width: 100%;
    height: 100px;
    color: #ffffff;
    background-color:rgb(101, 161, 109);
    
    
    }
    
    
    #sidebar {
    
    
        width: 20%;
        height: 500px;
        background-color: rgb(251, 127, 255);
        float:left;
    }
    
    
    #main {
    
    
    width: 80%;
    height: 500px;
    background-color: brown;
    float: left;
    
    
    
    
    }
    #footer {
        width: 100%;
        height: 100px;
        background-color:aqua;
        float:left;
    }

@media screen and (min-width : 600px) {
    


}
    
    #container {
    
    
        width: 100%;
        margin:auto;
       
    }
    #header {
    
    
        width: 100%;
        height: 100px;
        color: #ffffff;
        background-color:rgb(101, 161, 109);
        
        
        }
        
        
        #sidebar {
        
        
            width: 100%;
            height: 500px;
            background-color: rgb(251, 127, 255);
            float:left;
        }
        
        
        #main {
        
        
        width: 100%;
        height: 500px;
        background-color: brown;
        float: left;
        
        
        
        
        }
        #footer {
            width: 100%;
            height: 100px;
            background-color:aqua;
            float:left;
        }

I tried to adjust the desktop screen size to mobile in Visual Studio Code using Media Queries, but the code doesn’t seem to be working.

Tags:

2

Answers


  1. 0

    Your media query code is outside the media query declaration. Correctly it should be like this:

    @media screen and (max-width: 600px) {
  #container {
    width: 100%;
    margin: auto;
  }
  #header {
    width: 100%;
    height: 100px;
    color: #ffffff;
    background-color: rgb(101, 161, 109);
  }
  #sidebar {
    width: 20%;
    height: 500px;
    background-color: rgb(251, 127, 255);
    float: left;
  }
  #main {
    width: 80%;
    height: 500px;
    background-color: brown;
    float: left;
  }
  #footer {
    width: 100%;
    height: 100px;
    background-color: aqua;
    float: left;
  }
}

@media screen and (min-width: 600px) {
  #container {
    width: 100%;
    margin: auto;
  }
  #header {
    width: 100%;
    height: 100px;
    color: #ffffff;
    background-color: rgb(101, 161, 109);
  }
  #sidebar {
    width: 100%;
    height: 500px;
    background-color: rgb(251, 127, 255);
    float: left;
  }
  #main {
    width: 100%;
    height: 500px;
    background-color: brown;
    float: left;
  }
  #footer {
    width: 100%;
    height: 100px;
    background-color: aqua;
    float: left;
  }
}
    Login or Signup to reply.
  2. 0

    For media queries, your css has to be between the {}s like this:

    @media screen and (min-width : 600px) {
    #container {
        width: 100%;
        margin: auto;
   
    }
    /* Rest of your css */
}

    Plus, css that is the same across viewpoints shouldn’t be repeated in each media queries, for example, as the above code is in both media queries, you can just move it out of the media queries into the main css block.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search