Unwanted page space when creating media queries

Asked

Viewed 51 times

1

I’m creating a site with responsive layout,when the site enters the mobile solution leaves an unwanted 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;
}
}

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

css3

  • The CSS in your question is not enough to cause what appears in the screenshot. The space will have to come from some fault in the Markup or a CSS definition other than the ones in your question. You should update the question with relevant information for the problem analysis.

1 answer

0


When you use media queries you must have at least the minimum and maximum that makes the browser choose a part of the code or other.

Then I see that you’re pooping min-width for both of you. I suggest you change to:

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

Thus the border between one and the other is closed and does not compete with each other.

  • 1

    The statements in the media @media(min-width:176px) are always in force unless amended in the media @media(min-width:320px), see example. A text-align:center in the first it does not need to be declared in the second if it is to maintain the alignment to the center. But the problem of OP seems to be a huge margin or a space that an element before the #rodape occupies. Anyway, lack information in the question... for example: where does the black bottom of the footer come from? And if this is stated, what other statements exist?

  • 1

    Very good @Sérgio read many articles about the "conflicts" of Media Queries and this went unnoticed, I thank you from now on.

  • @Lamborghiniaventador the comment of Zuul makes a lot of sense too, sometimes it is useful to have min-width in both but aware that some rules of mobile pervalecem on the desktop.

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.