Unwanted space on page when creating media queries

Question

Unwanted space on page when creating media queries

Navigation

#1 by (0 votes)

1

I'm creating a site with responsive layout, when the site enters the mobile resolution on an undesirable space below

@media(min-width:176px) {
div#rodape{
width: 100%;
height: 70px;
padding-top: 10px;
text-align:center;
}
}

@media(min-width:320px) {
div#rodape{
width: 100%;
height: 230px;
text-align:center;
}
}

/ OBS. this site is not mine this is just an example /

css3

asked by anonymous 23.10.2014 / 07:54

1 answer

Sorting an Array customize create () on kendo toolbar

score 0 · Accepted Answer

When you use media queries you have to be aware of the minimum and maximum that causes the browser to choose part of the code or another.

Then I see that you are defining min-width in your queries, for both. I suggest you change to:

@media(max-width:319px){
    /* ... */
}
@media(min-width:320px){
    /* ... */
}

So the border between one and another is defined and does not compete with one another.