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

Navigation
2

I know it should be simple, but I'm stuck here in this, 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 stay as relative, can someone exemplify how to do this?

Here's 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;
}
    
asked by anonymous 25.05.2018 / 18:50

1 answer

1

EDIT:

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

You have to use @media to construct your CSS rules, in the case of this example I stated that when the screen has a maximum of 768px width the div has a color and a position , when is 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 you have Mozilla documentation on the subject. link

    
25.05.2018 / 19:09
Regular expression to validate a field My Windows Form Disappears in VBA