How do I use media query to make form responsive for all devices-CodePudding

I created a simple form using HTML and CSS, but when I tried inspecting it on my browser by adjusting the width everything goes out of place i.e. I want the responsiveness of the website to smartly scale components to a smaller screen size.

Sorry I am currently not afforded the opportunity to post images in questions yet

So here's my form at different widths:

initial @1903px (as expected)

adjusted @1619px (as expected)

adjusted @1164px (not as expected i.e. distribute, buy and sell should maintain some distance away from the margin of fullname)

adjusted @1103px (not as expected i.e. distribute, buy and sell should be together)

adjusted @784px (not as expected i.e. distribute, buy and sell should be together)

adjusted @483px (not as expected i.e. distribute, buy and sell should be together, drop-down-arrow for distribution-route falls out of place)

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
  
    

</head>
<body>
 
    <!--Form-->
    <section >
        <div >
            <div >
                <h2>CREATE</h2>
            </div>
            <div >
                <button type="button" >Distribute</button>
                <button type="button" >Buy</button>
                <button type="button" >Sell</button>
                
            </div>
            <div >
                <form action="" >
                     
                    
                    <label for="uname"><b>Full Name:</b></label>
                    <input type="text" name="student matric no"placeholder="Enter full name"required>

                    <label for="psw"><b>Password:</b></label>
                    <input type="password" name="password" placeholder="Enter password"required>

                     
                    <label for="sem"><b>Location:</b></label>
                    <div >
                      <div id="selectField">
                        <p id="selectText">Select a Location</p>
                        <img src="logo/arrow_down.png" alt="" id="arrowIcon">
                      </div>
                    </div>

                    <button type="submit" >SUBMIT</button>
                   
                     
                 
                    
              

                   


                    
                </form>


                

            </div>
            


        </div>

    </section>

 <!--Here is the CSS:-->
<style>
* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  font-size: 16px;
  user-select: none;
}

/* APPLICATION */
.applicant {
  width: 60%;
  margin: auto;
  text-align: left;
  margin: 90px auto;
  padding-top: 100px;
  padding-bottom: 100px;
}
.login-center {
  height: 100%;
  flex-basis: 41%;
  background: #ffffff;
  padding: 35px 5px 0px 5px;
  box-sizing: border-box;

  box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  color: #000;
}
.links {
  text-align: center;
  margin-left: -20px;
  margin-right: -20px;
  margin: 0 auto;
  padding-top: 50px;
}
.app-button {
  color: #c4c4c4;
  background-color: #ffffff;
  border: 1px solid #000;
  font-weight: bold;
  font-size: 17px;
  width: 200px;
  margin: 0 20px;
  display: inline-block;
  line-height: 40px;
  padding: 5px;
  cursor: pointer;
}
.app-button:hover {
  background: #c4c4c4;
  color: #000000;
  transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
  border: 1px solid #c4c4c4;
  background-color: #c4c4c4;
  color: #000;
}

/* FORM */
.form input::placeholder {
  font-size: 14px;
  color: #000;
}
.form label {
  color: #000;
  margin: 20px 0;
  font-size: 17px;
}
.form-u {
  margin: 70px 0;
  padding: 0px 100px;
}
.form input {
  width: 100%;
  padding: 20px;
  margin: 20px 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: #ffffff;
  border: 1.7px solid #e1e1e1;
}
.form input:focus {
  border-color: #c4c4c4;
  box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
  color: #c4c4c4;
  background-color: #000;
  border: 1px solid rg#c4c4c4;
  font-weight: bold;
  font-size: 17px;
  width: 100%;
  margin: 40px 0;
  display: inline-block;
  line-height: 40px;
  padding: 5px;
  cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
  font-size: 15px;
  color: #000;
}
.selector {
  width: 100%;
  padding-top: 20px;
  margin-bottom: 25px;
  position: relative;
}
#selectField p {
  font-size: 15px;
}
#selectField {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #c4c4c4;
  padding: 20px 20px;
  color: #000;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}

/*RESPONSIVE*/
/* WHAT DO I DO ? */
</style>

My goal is to use media query to make the form responsive on all screens, please how can I make my form smartly responsive? Hope someone can help :)

CodePudding user response：

Your Question is how to use media query, right?
it's really simple. lets says I have button with width 200px.
and I want width button become smaller in smaller device.

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    button{
        width: 100px;
    }
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    button{
        width: 150px;
    }
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 
    button{
        width: 180px;
    }
}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 
    button{
        width: 190px;
    }
 }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  
    button{
        width: 200px;
    }

}

just add the media query on your css and add element or classes name that you want to customize into each media queries.

CodePudding user response：

You can use the vw, vh, vmin and vmax units to size your content relative to your viewport size.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form</title>
  
    

</head>
<body>
 
    <!--Form-->
    <section >
        <div >
            <div >
                <h2>CREATE</h2>
            </div>
            <div >
                <button type="button" >Distribute</button>
                <button type="button" >Buy</button>
                <button type="button" >Sell</button>
                
            </div>
            <div >
                <form action="" >
                     
                    
                    <label for="uname"><b>Full Name:</b></label>
                    <input type="text" name="student matric no"placeholder="Enter full name"required>

                    <label for="psw"><b>Password:</b></label>
                    <input type="password" name="password" placeholder="Enter password"required>

                     
                    <label for="sem"><b>Location:</b></label>
                    <div >
                      <div id="selectField">
                        <p id="selectText">Select a Location</p>
                        <img src="logo/arrow_down.png" alt="" id="arrowIcon">
                      </div>
                    </div>

                    <button type="submit" >SUBMIT</button>
                   
                     
                 
                    
              

                   


                    
                </form>


                

            </div>
            


        </div>

    </section>

 <!--Here is the CSS:-->
<style>
* {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  padding: 0;
  margin: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  display: flex;
  font-size: 1vw;
  user-select: none;
}

/* APPLICATION */
.applicant {
  width: 60%;
  margin: auto;
  text-align: left;
  margin: 6.2vw auto;
  padding-top: 6.5vw;
  padding-bottom: 6.5vw;
}
.login-center {
  height: 100%;
  flex-basis: 41%;
  background: #ffffff;
  padding: 2.5vw 0.2vw 0px 0.2vw;
  box-sizing: border-box;

  box-shadow: 0 0 50px 0px #e1e1e1;
}
.text h2 {
  text-align: center;
  font-size: 3vw;
  font-weight: 600;
  color: #000;
}
.links {
  text-align: center;
  margin-left: -1.3vw;
  margin-right: -1.3vw;
  margin: 0 auto;
  padding-top: 3.2vw;
}
.app-button {
  color: #c4c4c4;
  background-color: #ffffff;
  border: 1px solid #000;
  font-weight: bold;
  font-size: 1vw;
  width: 13vw;
  margin: 0 1.3vw;
  display: inline-block;
  line-height: 2.6vw;
  padding: 0.2vw;
  cursor: pointer;
}
.app-button:hover {
  background: #c4c4c4;
  color: #000000;
  transition: 0.5s;
}
/* ACTIVE STATE */
.links .active,
.app-button:hover {
  border: 1px solid #c4c4c4;
  background-color: #c4c4c4;
  color: #000;
}

/* FORM */
.form input::placeholder {
  font-size: 1vw;
  color: #000;
}
.form label {
  color: #000;
  margin: 1.3vw 0;
  font-size: 1vw;
}
.form-u {
  margin: 4.5vw 0;
  padding: 0px 6.5vw;
}
.form input {
  width: 100%;
  padding: 1.3vw;
  margin: 1.3vw 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: #ffffff;
  border: 1.7px solid #e1e1e1;
}
.form input:focus {
  border-color: #c4c4c4;
  box-shadow: 0 0 15px 0px #e1e1e1;
}
.button-u {
  color: #c4c4c4;
  background-color: #000;
  border: 1px solid rg#c4c4c4;
  font-weight: bold;
  font-size: 1vw;
  width: 100%;
  margin: 2.6vw 0;
  display: inline-block;
  line-height: 2.5vw;
  padding: 0.3vw;
  cursor: pointer;
}
/* DROPDOWN FOR LOCATION*/
.form input {
  font-size: 1vw;
  color: #000;
}
.selector {
  width: 100%;
  padding-top: 1.3vw;
  margin-bottom: 1.5vw;
  position: relative;
}
#selectField p {
  font-size: 1vw;
}
#selectField {
  width: 100%;
  background: #ffffff;
  box-sizing: border-box;
  border: 1px solid #c4c4c4;
  padding: 1.3vw 1.3vw;
  color: #000;
  font-size: 1vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  position: relative;
}

/* I only used vw here, but it's not necessarily the best approach */
</style>

You can quickly look up the CSS Units, and google for each in depth if you need more clarification.

Also, if you need to know your viewport size: What is my viewport.