thins are a little messy in different resolution - css

Question

I have div like this
<div class="row ">
<div class="page-account-box ">
<div class="col-lg-6 col-md-6 mx-auto ">
<div class="account-box">
<div class="picture_account">
<img src="~/images/p1.jpg" class="imgFormat" style=" top: 60px; left: 60px;" />
</div>
<div class="account-box-content mt-3">
<form method="post" class="form-account" asp-action="signup" id="signupForm">
<div class="row pt-3 ">
<div class="col-6">
<div class="form-account-label-input ">
<label>Firstname<span class="star-red"> *</span></label>
<input asp-for="FirstName" type="text" class="w-100">
<span asp-validation-for="FirstName" class="text-danger star-red"></span>
</div>
</div>
<div class="col-6">
<div class="form-account-label-input">
<label>Lastname<span class="star-red"> *</span></label>
<input asp-for="LastName" type="text" class="w-100">
<span asp-validation-for="LastName" class="text-danger star-red"></span>
</div>
</div>
</div>
<div class="row pt-3 row-margin">
<div class="col-12">
<div class="form-account-label-input">
<label>Email</label>
<input asp-for="Email" type="text" class="w-100">
</div>
</div>
</div>
<div class="row pt-3 row-margin">
<div class="col-6">
<div class="form-account-label-input ">
<label>Password <span class="star-red"> *</span></label>
<input asp-for="Password" type="password" class="w-100">
<span asp-validation-for="Password" class="text-danger star-red"></span>
</div>
</div>
<div class="col-6">
<div class="form-account-label-input">
<label>Repeat Password <span class="star-red"> *</span></label>
<input asp-for="ConfirmPassword" type="password" class="w-100">
<span asp-validation-for="ConfirmPassword" class="text-danger star-red"></span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
and this is Css
.page-account-box {
width: 100%;
}
.page-account-box .account-box {
width: 100%;
height: auto;
padding: 0;
border: 1px solid #e2efef;
-webkit-box-shadow: 0 12px 12px 0 hsla(0,0%,70.6%,.11);
box-shadow: 0 15px 23px 0 hsla(0, 0%, 71%, 0.29);
position: relative;
margin: 20px auto 30px;
display: flex;
background: #fff;
border-radius: 20px;
}
.page-account-box .account-box .picture_account {
display: inline;
}
.page-account-box .account-box .account-box-content {
min-height: 50%;
padding: 15px 20px;
border-radius: 20px;
width: 100%;
}
.page-account-box .account-box .picture_account .imgFormat {
-moz-box-shadow: 10px 10px 5px #ccc;
-webkit-box-shadow: 10px 10px 5px #ccc;
box-shadow: 10px 10px 5px #ccc;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
position: relative;
background-color: darkgoldenrod;
}
.form-account {
padding: 0px;
margin: 0px;
}
if I make in third line to , so it will be ok in 1280*1024 but ok in higher resolution
when the display is in 1920* 1080, it looks great, but when I change the display to 1280* 1024, it looks a little messy. how to make it to be ok in both resolution?

Answer 1

You should learn/explore media queries within CSS:
https://drafts.csswg.org/mediaqueries/#width
There are plenty of examples on how to use it:
/* here generic css*/
#media (min-width: 1280px) {
/* if width is at least 1280px, apply some change. Example: */
.page-account-box .account-box {
width: 90%;
height: auto;
}
}
or maybe you would need:
#media (400px <= width <= 700px) {
/* adjust for mobile devices within these constraints */
...
}