Position Fixed for desktop version and position relative for mobile version, how to do in CSS?

Asked

Viewed 197 times

2

I know it should be simple, but I’m in charge here, I have a div with ID called Login and I have to leave it as Fixed when the navigation is made of computers, so in the mobile version this div will have to be as relative, someone can exemplify how to do this?

Here my CSS:

@media only screen and (max-width: 900px) {
    .informacoes, .footer-info {
        display: none;
    }

    .login {
        position: relative;
        margin-top: 25%;
    }
}


.login {
    position: fixed;
    margin-top: 7%;
    z-index: 9;
    background: rgba(252, 252, 252, 0.80);
    padding: 30px 30px 90px;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    transition: left 0.5s linear;
}
css mobile responsive
  • 1

    Face a good practice is to always put the @media last, already after all the CSS. I don’t know if it will solve... If you do not solve I will ask you to edit again and put your HTML including the head of the page and the full CSS. Also try to get this Teg inside the head <meta name="viewport" content="width=device-width, initial-scale=1"> may solve...

  • As for the meta name are all inserted correctly, but I’ll put the code after all the CSS to see

  • @hugocsl old, perfect, it was only putting the media at the end after all the normal CSS dai worked perfectly, thank you very much... puts this consideration in your reply, which I will accept after you put that remark there of your comment

  • 1

    Ok I will edit my answer. and explain what happened. I thank :D

1 answer

1


EDIT:

By the code you posted in the question you can see that the rules of the Media Query are coming before what would be the css default. With this there is an overlapping of classes. The CSS is read by the browser from top to bottom, so when it reads everything below it overwrites what is above it understands. So the @media rules should always come at the end of the . css file

You have to use the @media to build your CSS rules, in the case of this example I declared that when the screen has up to a maximum of 768px wide to div has a colour and a position, when greater than 768px will have another color and another position.

#login {
  background-color: blue;
  position: fixed;
}

@media screen and (max-width: 768px) {
  #login {
    background-color: red;
    position: relative;
  }
}
<div id="login">
  <span>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi, quisquam!</span>
</div>

OBS: Here’s some documentation from Mozilla on the subject. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Media_queries

  • So I’ve done this way more is going wrong, I’ll put my code there in the question, see there!

Browser other questions tagged css mobile responsive

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