Strategies for positioning a label at the top of an input form

I have designed a sample registration form using HTML and applied some CSS. The labels I used are currently aligned to the left next to the corresponding input fields.

@media (max-width:520px)

Now, I am looking to align these labels on top of the input fields when the width is below 520px to ensure responsiveness.

I attempted using display block but didn't achieve the desired result.

Here is how it should look like with a width under 520px

Below is the provided code:

HTML

<!DOCTYPE html>
... (omitted for brevity)
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
... (omitted for brevity)

  @media (max-width:520px) {
    .fmr form .input_fld{
      flex-direction: column;
      align-items: flex-start;
    }
    .fmr .input_fld label{
      display: block;
    }
    .fmr form .input_fld{
      flex-direction: row;
    }
  }

Thank you

htmlcssformsweb-applicationsresponsive

Answer №1

Check it out right here

https://i.sstatic.net/uhgWG.pngYou can find the id using #element_id.

 @media (max-width:520px) {
#fmr form .input_fld{
  flex-direction: column;
  align-items: flex-start;
}

}

@import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');

*{
    margin: 0;
    padding: 0;
    font-family: TitilliumWeb,sans-serif;
    box-sizing: border-box;
}


body{
    background-color: rgb(149, 101, 82);
    padding: 0 10px;
}
.titl{
    display: block;
    font-size: 20px;
    font-weight:bold;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;
    margin-top: 7px;
}
form {
    width: 100%;
}

#fmr{
    box-shadow: 2px 2px 4px 3px rgba(36, 36, 36, 0.704);
    background-color: rgb(181, 175, 169);
    width: 50%;
    max-width: 500px;
    margin: 50px auto;
    padding: 25px;
    text-align: center;
    border-radius: 8px;
}
.input_fld{
    margin-bottom: 17px;
    margin-right: 5px;
    margin-left: 0;
    display: flex;
    align-items: center;
}
.input_fld > label{
    display: flex;
    width: 200px;
    margin-right: 40px;
    font-size: 17px;
}
.slgn{
    position: relative;
    width: 100%;
    height: 5vh;
}

.slgn select{
    appearance:none;
    box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
    outline: none;
    width: 100%;
    padding: 8px 10px;
    font-size: 15px;
    border: 1px solid #d5dbd9;
    border-radius: 3px;
  }
.slgn:before{
    content: "";
    position: absolute;
    top: 13px;
    right: 10px;
    border: 8px solid;
    border-color: #d5dbd9 transparent transparent ;
    pointer-events: none;
  }
  
.slgn select:focus {
    border: 3px solid #fec107;
    animation: 0.8s ease;
  }

input[type="text"] {
    box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
    width: 100%;
    margin: 5px auto;
    height: 6vh;
    background-color: none;
    border: none;
    outline: none;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 15px;
    transition: all 0.3s ease;
}
input[type="text"]:focus {
    border: 3px solid #fec107;
    animation: 0.8s ease;
}
input[type="tel"] {
    box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
    text-decoration: none;
    margin: 5px auto;
    width: 100%;
    background-color: none;
    border: none;
    outline: none;
    height: 5.5vh;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 16px;
    transition: all 0.3s ease;
}

input[type="tel"]:focus {
    border: 3px solid #fec107;
    transition: 0.8s ease;
}

input[type="email"]{
    box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
    margin: 5px auto;
    width: 100%;
    background-color: none;
    border: none;
    outline: none;
    height: 6vh;
    padding: 8px 10px;
    border-radius: 3px;
    font-size: 15px;
    transition: all 0.3s ease;
}

input[type="email"]:focus {
    border: 3px solid #fec107;
    transition: 0.8s ease;
}

.input_fld textarea{
    box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);;
    margin: 5px auto;
    width: 100%;
    background-color: none;
    border: none;
    outline: none;
    height: 88px;
    resize: none;
    border-radius: 3px;
    font-size: 17px;
    padding:10px 13px;
}

.input_fld textarea:focus {
    border: 3px solid #fec107;
    transition: 0.8s ease;
}
 
input[type="checkbox"], .chckbx .fa-square-check {
    display: none;
}

.fa-square{
    font-size: 1.3em;
}

input[type="checkbox"]:checked ~ .fa-square-check {
    display: inline-block;
    font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square {
    display: none;
}

.chckbx i:focus {
    border: 3px solid #fec107;
    transition: 0.8s ease;
}

i {
    margin-right: 3px;
}

.ttbx{
    cursor: pointer;
    font-size: 18.8px;
    margin-left: 5px;
    margin-right: 74px;
}

.input_fld .btn{
    width: 100%;
    padding: 9px 11px;
    font-size: 19px; 
    border: 0px;
    background:  #6b8669;
    color: #343533;
    cursor: pointer;
    border-radius: 4px;
    outline: none;
    margin: 10px 0 auto;
}

.input_fld:last-child{
    margin-bottom: 0;
}

@media (max-width:520px) {
    #fmr form .input_fld{
      flex-direction: column;
      align-items: flex-start;
    }
}
<!DOCTYPE html>
<html lang="en">
  <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>This</title>
  <link rel="stylesheet" href="style.css" />
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>

  <body>
    <div id="fmr">
      <div class="titl">Registration Form</div>
      <form action="info.php">
        <div class="input_fld">
          <label>First Name : </label>
          <input type="text" />
        </div>

        <div class="input_fld">
          <label>Last name : </label>
          <input type="text" />
        </div>

        <div class="input_fld">
          <label> Email Address : </label>
          <input type="email" />
        </div>

        <div class="input_fld">
          <label>Gender : </label>
          <div class="slgn">
            <select name="gender" id="gender">
              <option value="select">Select</option>
              <option value="male">Male</option>
              <option value="female">Female</option>
            </select>
          </div>
        </div>

        <div class="input_fld">
          <label for="idc"> Phone Number:</label>
          <input type="tel" pattern="[+]{0-2}{0-12}" />
        </div>

        <div class="input_fld">
          <label for="ide"> Address : </label>
          <textarea class="address"></textarea>
        </div>

        <div class="input_sl">
          <label class="chckbx">
            <input type="checkbox" />
            <i class="fa-regular fa-square"></i>
            <i class="fa-solid fa-square-check"></i>

            <span class="ttbx"> Do you agree to the terms and conditions </span>
          </label>
        </div>

        <div class="input_fld">
          <input type="submit" value="Register" class="btn" />
        </div>
      </form>
    </div>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to compress or condense several items

Trying to figure out how to create an Expand/Collapse button using bootstrap. I have two items that can be expanded or collapsed individually, as well as a main button that should expand or collapse all items at once. The problem is that if one item is exp ...

htmlbootstrap-4toggle

Understanding the fundamentals of event handling in JavaScript

Is there a way to access the object that called the event handler within the event handler function itself? For example: marker.on('dragend', onDragEnd); In this case, marker is the object that triggers the ondragEnd function on the Dragend eve ...

javascripthtmljqueryevent-handlingjquery-events

Styling the <nav> element with CSS

Why is the CSS property not applying to the <nav> element? Are we unable to style these specific Bootstrap tags on our own? If it is possible, how can we achieve this? nav{ display: none; } <link rel="stylesheet" href="https://stackpath.boot ...

htmlcssbootstrap-4

Enhance a link by including a parameter using jQuery

Recently diving into the world of JavaScript/jQuery, I encountered some auto-generated HTML code from a framework. Take a look: <tr class="alternate-row"> <td>17 July, 2012</td> <td>AM Shipment</td> <td>Gene ...

jqueryhtmljquery-uijquery-selectorsdom-events

Choose from a dropdown menu, not a text input box

Update Needed I currently have an input field on my website for users to enter a year. I would like to replace this with a dropdown menu to make it easier for users, while still sending the data to the query.php file. The current setup works fine without ...

phphtml

Loading web pages using ajax and handling relative paths

My method involves using ajax to load HTML files when links on my page are clicked. The process is simplified as follows: links.click(function () { var href = $(this).attr("href"); history.pushState(null, null, href); $.get($(this).attr("href" ...

javascriptjqueryajaxhtmlweb

Tips for automatically activating a CSS animation each time a react component re-renders

I am trying to implement an animation on a react component that triggers every time it re-renders due to prop changes: react: function Card({ cardText }) { return <div className="roll-out">{cardText}<div/> } Here's the CSS I ...

cssreactjs

Choose the final elements by using CSS selectors

Can you target the last X elements in a group using only CSS without knowing the total number of elements? For example, is it possible to target the last 3 elements in a ul using CSS? <ul> <li>Element 1</li> <li>Element 2</ ...

htmlcsscss-selectors

One issue with Angular2 is that it fails to inject template CSS upon refreshing the page

My application utilizes the selector portfolio-app and includes two stylesheets - '../app/styles/templateMobile.css', '../app/styles/templateOther.css' When I initially access my app from the default URL (localhost:3000 ATM), the style ...

csstypescriptangular

Utilizing external loops in varying scenarios within one website (WordPress)

I am currently facing a dilemma with my theme where I have a blog page and a homepage without a blog loop. I am interested in adding some blog posts to my homepage, specifically the most recent ones. Currently, I have used the blog page as a template for ...

phphtmlwordpressloopsblogs

When the <button> element associated with the JavaScript code is clicked, no result is

The code below is causing me some trouble; I can't seem to find the error in it. <!DOCTYPE html> <html> <head> <title>Party Sequence</title> </head> <body> <label for="inputN">Enter the valu ...

javascripthtml

Changing SVG containing image tags into HTML canvas

I'm attempting to convert an SVG file to an HTML canvas, and everything works perfectly until I introduce the image element in the SVG. When I include image elements, the canvg function stops working. Below is the code I used to convert the SVG to ca ...

javascriptjqueryhtmlsvg

Adapting software for use with Panasonic Viera

We are in the process of transferring our current HTML/JavaScript/CSS application to the Panasonic platform. Our current setup involves using JavaScript for generating HTML and CSS for styling the application. The programming language used in the Panasoni ...

javascripthtmltelevision

arrange objects into an array depending on punctuation marks

Currently, I am in the process of developing a method to retrieve data from my MySQL database and present it as an array. However, the issue I am facing is that only one string of data is accessible at a time, with each instance separated by a comma. For e ...

phphtmlmysql

Receiving the result as well as encountering undefined initially during AJAX request

I have a dropdown menu, and when a user selects an option, an AJAX call is made to retrieve and display data based on the selected value. If the dropdown value is 2, it triggers the AJAX request. However, I am encountering two issues: https://i.sstatic.n ...

javascriptphpjqueryhtmlcodeigniter-3

Comparing React's Styled-components, JSS, and Emotion: Which is

As a CTO, I am faced with the decision of choosing between three popular CSS-in-JS libraries: jss emotion styled-component. I will keep this question focused and avoid straying into subjective territory. If necessary, I will answer it myself by asking sp ...

cssreactjsstyled-componentsjssemotion

Tips for sending a string as HTML content in VueIn Vue, you can send a string as

I am attempting to pass the value for exp by using this code snippet. However, the form of selectedChannel.explanation appears as "channel name". Is there a way for me to display exp as channel name? computed: { channel: { get() { ...

htmlvue.js

Guide on creating line breaks within a list in a Python email

I'm having trouble querying a list from my Flask database and then sending it out as an HTML email. The issue is that I can't seem to break the list items into different lines. For example, instead of: a b c I currently get 'abc' i ...

pythonhtmlemailflaskgmail

How can I insert an empty option following a selected value in a dropdown menu using jQuery?

How to use jQuery to insert a blank option after an existing option? I attempted to add a blank option, but it ended up at the top of the dropdown. I actually need one existing option followed by one blank option. For example: <option></option& ...

javascriptjqueryhtmldropdown

Connecting click events to multiple items, without the need for multiple functions

I'm struggling with the efficiency of my Javascript and I believe there must be a better way to achieve my goal. To demonstrate my issue, I've created a simplified version of my project on JSFiddle. JSFiddle The main objective is to display inf ...

javascriptjqueryhtmlcss