Give 100% responsive web screen

Question

Give 100% responsive web screen

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have these measurements in normal

.centrar{
    width:65%;
    margin:auto;
    text-align:center;
}

in the responsive I put

@media (max-width:800px){
  .centrar{
        width: 100% !important;
        height:80px;
        border:1px solid;
        margin: 0 auto;
    } 
}

and it does not take me 100% of the screen. Any suggestions? or should I do it with javascript?

css3

asked by Borja Sanchez 02.10.2017 в 12:59

source

2 answers

Math Class - Java Matrix with Java Script

score 1 · Answer 1

Your code works correctly, see that the css file is loading on your website, or that the route is appropriate.

Note that width:100%; means 100% of the parent container, it does not have to mean the whole screen.

Here is an example of your code working:

.centrar{ 
width:65%; 
margin:auto; 
text-align:center; 
color:blue;
}  
@media (max-width:800px){ 
  .centrar{ 
  width: 100% !important; 
  height:80px; 
  border:1px solid; 
  margin: 0 auto; 
  color: red;
  }
}

<div class="centrar">
ABCD
</div>

score 0 · Answer 2

What situation does not work for you?

Here is an expanded example that plays with the width and color of the edge. If you execute it and change the size of the browser window you should see how the different media queries are applied:

.centrar{
    width:65%;
    margin:auto;
    text-align:center;
    border: 1px solid;
}

@media (max-width: 800px){
  .centrar{
        width: 100%;
        height:80px;
        border:1px solid black;
        margin: 0 auto;
    }
}
@media (max-width: 400px){
  .centrar{
    width: 80%;
    border-color: blue;
  }
}
@media (max-width: 200px){
  .centrar{
    width: 50%;
    border-color: red;
  }
}

<div class="centrar"></div>