I have div like this

 <div >
<div >
    <div >
        <div >
            <div >
                <img src="~/images/p1.jpg"  style=" top: 60px; left: 60px;" />
            </div>

            <div >                   
                <form method="post"  asp-action="signup" id="signupForm">
                    <div >
                        <div >
                            <div >
                                <label>Firstname<span >&nbsp;*</span></label>
                                <input asp-for="FirstName" type="text" >
                                <span asp-validation-for="FirstName" ></span>
                            </div>
                        </div>
                        <div >
                            <div >
                                <label>Lastname<span >&nbsp;*</span></label>
                                <input asp-for="LastName" type="text" >
                                <span asp-validation-for="LastName" ></span>
                            </div>
                        </div>
                    </div>

                    <div >
                        <div >
                            <div >
                                <label>Email</label>
                                <input asp-for="Email" type="text" >
                            </div>
                        </div>
                    </div>
                    <div >
                        <div >
                            <div >
                                <label>Password <span >&nbsp;*</span></label>
                                <input asp-for="Password" type="password" >
                                <span asp-validation-for="Password" ></span>
                            </div>
                        </div>
                        <div >
                            <div >
                                <label>Repeat Password <span >&nbsp;*</span></label>
                                <input asp-for="ConfirmPassword" type="password" >
                                <span asp-validation-for="ConfirmPassword" ></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?

CodePudding user response：

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 */
...
}