How to make a responsive right aligned login box to center, when viewed in different screen sizes using media queries?

Question

I made a responsive login form with a login box aligned to the right, but I want my login box to display in the center at different screen sizes using CSS media queries.

My current CSS code is:

enter code here 
.login {  
position: absolute;  
top: 8em;   
right: 5vw;  
}  
.login-card {  
    min-width: 20vw;  
    max-width: 25em;  
    min-height: 20vh;  
    max-height: 25em;}    

Answer 1

This answer is a little bit general, but the question doesn't give me much information about your issue. It's recommended to give at least a snippet of the code you're struggling with

With that out of the way, I would insert some CSS attributes on the media query like this:

@media only screen and (max-width: 768px) {
    your_login_panel {
        display: block;
        width: 300px; /* the wished size for your login panel */
        margin: 20px auto; /* the second attribute has to be auto, this value combined with display:block will center the element inside the element that it's located */
    }
}

If you are using position: absolute to align your element to the right, remember to insert position: inherit inside the media query to overwrite this value.

UPDATE Now with the snippet, I can see that your CSS is not stating a left attribute, this is pretty useful to align something to the right. In order to center it, just add a left: property to your media query with the same value of the right attribute, the CSS will try to satisfy both attributes, you should also put an margin: auto; attribute, to give the CSS more freedom to play around with the margin and center the login panel. Your media query should look somehow like this:

@media only screen and (max-width: 768px) {
  .login {  
    position: absolute;  
    top: 8em;   
    right: 0px;   
    left: 0px;
    margin: auto;
  }  
  .login-card {  
     min-width: 20vw;  
     max-width: 25em;  
     min-height: 20vh;  
     max-height: 25em;
  }   
}

Answer 2

If you declare the display of the parent element of the login box as flex, you can set the normal display position of the login box on the right hand side, using:

justify-content: flex-end;

and write a @media query in which the value changes to:

justify-content: center;

Working Example:

body {
background-color: rgb(191, 191, 255);
}

section {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 24px 12px;
background-color: rgb(163, 163, 255);
box-shadow: 0 0 6px rgb(0, 0, 0);
}

form.login {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 88px auto;
grid-row-gap: 6px;
width: 240px;
padding: 12px;
font-family: arial, helvetica, sans-serif;
color: rgb(255, 255, 255);
background-color: rgb(95, 95, 255);
}

@media only screen and (max-width: 900px) {

section {
justify-content: center;
}

}

<section>
<form class="login">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="username" placeholder="Username" />


<label for="password">Password:</label>
<input type="text" name="password" id="password" class="password" placeholder="Password"/>
</form>
</section>

<p>On a narrower screen, the login box appears in the center.<br />
Try switching to <strong>Full page</strong>, to see the login box move over to the right hand side.

Answer 3

use media screen for making responsive

@media screen and (max-width: 767px){   
 .login {  
    position: absolute;  
    top: 8em;
    left: 0;   
    right: 0;
    margin: auto;  
    }  
    .login-card {  
        min-width: 20vw;  
        max-width: 25em;  
        min-height: 20vh;  
        max-height: 25em;
    } 
}