• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 96
  • Last Modified:

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

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)
0
benjaminfam
Asked:
benjaminfam
  • 4
  • 2
  • 2
  • +1
2 Solutions
 
mohan singhWeb developerCommented:
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
0
 
Vijaya KumarCommented:
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

0
 
benjaminfamAuthor 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!
1
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
benjaminfamAuthor 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?
0
 
David S.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)?
0
 
Vijaya KumarCommented:
what @David S. is correct.... bootstrap has only lg,md,sm,xs facility if u need u can write @media in css....
0
 
benjaminfamAuthor 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.
0
 
David S.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/
0
 
benjaminfamAuthor Commented:
These tips got me pointed in the right direction and I've been able to work through the rest.  Thanks for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now