How to code a two-column contact form to be mobile friendly (one-column)

Blair Benjamin
Blair Benjamin used Ask the Experts™
on
Hello, I have an older contact form that was written using html table elements that I'm looking to re-code using CSS (specifically with the grid elements) so that it is responsive and mobile friendly.   Could someone help me out with the basic CSS / HTML frame work to accomplish the following?  I'd like the layout to be two columns in a larger display and one column in a mobile/smaller display, as follows:

Larger Display:
Field1 label   Field1 input      Field2 label  Field2 input
Field3 label   Field3 input      Field4 label  Field4 input
Field5 lable   Field5 input      Field6 label  Field6 input

                                 Submit (centered)

Medium Display:
Field1 label        Field2 label
Field1 input       Field2 input
Field3 label        Field4 label
Field3 input       Field4 input
Field5 label        Field6 label
Field5 input       Field6 input

         Submit (centered)

Small/Mobile Display
Field1 label Field1 input
Field2 label Field2 input
Field3 label Field3 input
Field4 label Field4 input
Field5 label Field5 input
Field6 label Field6 input

Submit (centered)
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
use bootstrap html property for
large , small and medium display

<div class='col-md-6 col-xs-12 col-sm-12></div>

for more details use this link

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Check it out

<!--<!DOCTYPE html>-->


 <head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
  <style>


 [class^="col-"],
  [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
  }
  
  .float_left
  {
  float:left;
  }

  </style>
  </head>
  <body>
  <div class="container">
  <form>
    <div class="form-group col-lg-6 col-md-6" style="float:left;">
      <label for="lgFormGroupInput" class="col-lg-2 float_left col-md-12 col-sm-2 col-form-label col-form-label-lg">Email</label>
      <div class="col-lg-6 float_left col-md-12 col-sm-10">
        <input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
      </div>
    </div>
	<div class="form-group col-lg-6 col-md-6" style="float:left;">
      <label for="lgFormGroupInput" class="col-lg-2 float_left col-md-12 col-sm-2 col-form-label col-form-label-lg">Email</label>
      <div class="col-lg-6 float_left col-md-12 col-sm-10">
        <input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
      </div>
    </div>
	<div class="form-group col-lg-6 col-md-6" style="float:left;">
      <label for="lgFormGroupInput" class="col-lg-2 float_left col-md-12 col-sm-2 col-form-label col-form-label-lg">Email</label>
      <div class="col-lg-6 float_left col-md-12 col-sm-10">
        <input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
      </div>
    </div>
		<div class="form-group col-lg-6 col-md-6" style="float:left;">
      <label for="lgFormGroupInput" class="col-lg-2 float_left col-md-12 col-sm-2 col-form-label col-form-label-lg">Email</label>
      <div class="col-lg-6 float_left col-md-12 col-sm-10">
        <input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com">
      </div>
    </div>

  </form>
</div>
  </body>
  </html>

Open in new window

Blair BenjaminSr. Systems Administrator

Author

Commented:
At first glance, this appears to be exactly what I'm looking for.  Thanks so much!  I'm going to play around with this to verify and then come back to assign points/credit.   Thank you!
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Blair BenjaminSr. Systems Administrator

Author

Commented:
So in playing around with this, I'm finding that the resolution on newer smart phones is much higher that what Bootstrap seems to historically have identified.  For example, I wasn't getting quite the results I was expecting and then realized that the resolution on my Galaxy S8 (by default) was/is 2220x1080, which for Bootstrap classification purposes falls into the category of a "medium" display rather than small or extra small.    How are people (developers/designers) addressing this?
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
Bootstrap isn't magic; it's just a popular starting place. If you aren't satisfied with it, write your own media queries to supplement it or just don't use it. (I avoid it and similar CSS frameworks myself.)

Would you please explain more about why you want different layouts for medium and small sized screens (viewports)?
what @David S. is correct.... bootstrap has only lg,md,sm,xs facility if u need u can write @media in css....
Blair BenjaminSr. Systems Administrator

Author

Commented:
Sure, thanks for the follow-up.  Sorry my response is a little delayed.   Got snowed in this week here on the east coast.  :-)  

I fully recognize that Bootstrap isn't magic and is just a tool.  To answer your question about what I'm trying to do...  I'm just building a contact form that interacts with a DB, so the coding is in the context of a PHP script.   On a regular display, the input looks nice in two columns.  But on a mobile device, it needs to be pared down to one column otherwise it's too small or requires adjusting the screen (pinch in/out, etc.) .   For example, I have this test script that I posted just for playing around with various settings - https://cairn.edu/custom/test.php.  It looks OK on my Galaxy S8 when I rotate my screen to landscape, but in portrait I'd like the columns to stack.   I'll explore the media queries idea.  I'm kind of just now delving into this aspect of things.   And of course, I don't want to build anything specific to a Galaxy S8, but rather want to take into consideration whatever the majority are likely to be using these days.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
It seems my question was unclear. What I'm asking is why have 3 different arrangements instead of just 2?

When deciding what breakpoints (media queries) to use, these might be helpful:
http://mediag.com/news/popular-screen-resolutions-designing-for-all/
https://mydevice.io/devices/
http://screensiz.es/
Blair BenjaminSr. Systems Administrator

Author

Commented:
These tips got me pointed in the right direction and I've been able to work through the rest.  Thanks for your help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial