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

Question

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.

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 class="applicant">
        <div class="login-center">
            <div class="text">
                <h2>CREATE</h2>
            </div>
            <div class="links">
                <button type="button" class="app-button active">Distribute</button>
                <button type="button" class="app-button">Buy</button>
                <button type="button" class="app-button">Sell</button>
                
            </div>
            <div class="form-u">
                <form action="" class="form">
                    
                    <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 class="selector">
                      <div id="selectField">
                        <p id="selectText">Select a Location</p>
                        <img src="logo/arrow_down.png" alt="" id="arrowIcon">
                      </div>
                    </div>

                    <button type="submit" class="button-u">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?

What do you want to achieve with the narrower viewports? It's not clear in the question what kind of responsiveness do you want, or what kind of alternative layout strategies you have in mind. "Responsiveness" is a very broad term and doesn't translate into a concrete, desired layout. — Terry, Jan 22 '22 at 22:18
Hello terry, thank you for the response. What I mean is that the way it looks when viewed on a larger screen example @ width 1903px and want it to look the same when the screen is adjusted until it reaches the width @ 483px or even lesser(ie for mobile)..Thats what I mean..hope you understand — EinStyn, Jan 22 '22 at 22:32
I have edited the question again to give a better context of what I am trying to achieve — EinStyn, Jan 23 '22 at 10:17

score 2 · Accepted Answer · answered Jan 23 '22 at 08:51

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.

score 0 · Answer 2 · answered Jan 22 '22 at 22:50

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 class="applicant">
        <div class="login-center">
            <div class="text">
                <h2>CREATE</h2>
            </div>
            <div class="links">
                <button type="button" class="app-button active">Distribute</button>
                <button type="button" class="app-button">Buy</button>
                <button type="button" class="app-button">Sell</button>
                
            </div>
            <div class="form-u">
                <form action="" class="form">
                     
                    
                    <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 class="selector">
                      <div id="selectField">
                        <p id="selectText">Select a Location</p>
                        <img src="logo/arrow_down.png" alt="" id="arrowIcon">
                      </div>
                    </div>

                    <button type="submit" class="button-u">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.

Thank you Epsilon .Tried your method and you said it best vw is not the best approach..What I actually meant to ask is how to use media queries to make the form responsive on all devices — EinStyn, Jan 23 '22 at 07:56
@EinStyn, you don't. If you want a layout for all screen sizes, you should not use media queries. Media queries are called breakpoints for a reason. If you only want to change the layout at 483px, use the media query for just that. — Akshay K Nair, Jan 23 '22 at 10:23

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

2 Answers2