CSS - Side by Side div equal width, but at tablet size take up full screen

I am creating a form and I have 2 divs that are side by side. Here is my current html:

  <div class="form-row-fluid">
    <div class="form-field">
      <label>First name</label>
      <input class="input-thick">
      </input>
    </div>
    <div class="form-field">
      <label>Middle name</label>
      <input class="input-thick">
      </input>
    </div>
  </div>

And css:

.form-row-fluid {
  width: 100%;
  display: inline;
}
.form-field {
  width: 46%;
}

I have looked at another answer that said to use a display: table, but I can't get that to be as responsive as I need. When I get to tablet size, I want each form-field to go to width: 100%. What am I doing wrong?

Answers


Just use floats (and media queries of course).

.form-row-fluid {
    width: 100%;    
}

.form-field {
    width: 46%;
    float: left;
    display: block;
}

@media screen and (max-width:768px){
    .form-field { width: 100%; }
}

Here's the fiddle


@media screen and (max-width:600px){
  .input-thick { width: 100%; }
}

You should use media queries if you want responsive CSS.


Need Your Help

Presenting xml validation errors

c# xml validation xsd

I'm trying to do this: I have an XML file that I want to validate according to an XSD file.

How do I POST urlencoded form data with $http without jQuery?

javascript jquery angularjs ajax angularjs-http

I am new to AngularJS, and for a start, I thought to develop a new application using only AngularJS.