Alignment of elements and responsiveness

Question

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello Bulma!</title>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css"
/>
</head>
<style>
input, label{
    display: block;
}
#drive_access{
  margin-left: 270px;
}
#submit{
    margin-left: 600px;
}

</style>
<body>
<section class="section">
  <div class="container">
    <div class="columns">
      <div class="column is-narrow">
        <label for="name">Name</label>
        <input type="text" placeholder="Enter First Name" id="name" class="input is-info"/>
      </div>
      <div class="column is-narrow">
        <label for="last_name">Last Name</label>
        <input type="text" placeholder="Enter Last Name" id="last_name" class="input is-info"/>
      </div>
      <div class="column is-narrow">
        <label for="email">Email</label>
        <input type="email" placeholder="Enter Email" id="email" class="input is-info"/>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="columns">
      <div class="column is-narrow">
        <label for="contact_number">Contact number</label>
        <input type="tel" placeholder="Enter contact number" id="contact_number" class="input is-info"/>
      </div>
      <div class="column is-narrow">
        <label>Department</label>
       <p class="control">
        <span class="select is-info">
          <select>
            <option value=""> Please choose department</option>
            <option value="Administration">Administration</option>
            <option value="Electronics">Electronics</option>
            <option value="IT Department">IT Department</option>
            <option value="">Library</option>
            <option value="Mechanical">Mechanical</option>
        </select>
        </span>
      </p>
      </div>
      <div class="column">
        <label for="employment_type">Employment type</label>
      <p class="control">
        <span class="select is-info">
          <select>
            <option value="">Choose employment types</option>
            <option value="Contract">Contract</option>
            <option value="Internship">Internship</option>
            <option value="Permanent">Permanent</option>
        </select>
        </span>
      </p>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="columns">
      <div class="column is-narrow">
        <label for="preferred_username">Preferred username</label>
        <input type="text" id="preferred_username" class="input is-narrow is-info" placeholder="Enter preferred username"/>
      </div>
      <div class="column is-one-fifth">
        <label for="starting_date">Starting date</label>
        <input type="date" id="starting_date" class="input is-narrow is-info"/>
      </div>
      <div class="column is-one-fifth">
        <label for="ending_date" id="end_date_label">Ending date</label>
        <input type="date" id="ending_date" class="input is-info"/>
      </div>
    </div>
  </div>
   <div class="container">
    <div class="columns">
      <div class="column is-two-fifths">
        <label for="affiliation">Affiliation</label>
      <p>
        <span class="select is-info">
        <select>
          <option value="">Select employee affiliation</option>
          <option value="Rookie">Rookie</option>
          <option value="Veteran">Veteran</option>
      </select>
    </span>
      </p>
      </div>
      <div class="column is-two-fifths">
        <label for="computation_device">Computation device</label>
      <p class="control">
       <span class="select is-info">
        <select>
          <option value="">Select computation device</option>
          <option value="Laptop">Laptop</option>
          <option value="Desktop">Desktop</option>
      </select>         
       </span> 
      </p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="columns">
      <div class="column is-one-fifth">
        <label for="mailing_list">Mailing list</label>
        <p class="control">
              <textarea  rows="4" cols="15" placeholder="Enter names of mailing lists user needs to be added on" id="mailing_list" 
              class="textarea is-info"></textarea>
        </p>
      </div>
      <div class="column is-one-fifth" id="drive_access">
        <label for="drive_access">Specify shared drive access</label>
        <p class="control">
              <textarea  rows="4" cols="15" placeholder="specify shared drive access names here" 
              id="mailing_list" class="textarea is-info" ></textarea>
        </p>
      </div>
    </div>
  </div>
  <div class="columns">
    <div class="column is-pulled-right">
      <button class="button is-primary" id="submit">Submit</button>
    </div>
  </div>
  </div>
</section>

My problem is the UI does not respond well when screen changes. For example if the developer tools tab is opened and you stretch it to the left, the elements just float about. The second issue is i would to have the edges of the elements align. I tried looking into Bulma classes to fix this but no luck. Please help

score 0 · Answer 1 · answered Aug 18 '20 at 11:52

0

.section{   
        display: flex;
        flex-direction: column;
        align-items: center;
}

answered Aug 18 '20 at 11:52

Ehsan

766
10
17

Code-only answers are discouraged on Stack Overflow because they don't explain how it solves the problem. Please edit your answer to explain what this code does and how it answers the question, so that it is useful to the OP as well as other users also with similar issues. – FluffyKitten Aug 18 '20 at 18:42

Alignment of elements and responsiveness

1 Answers1