Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 468
  • Last Modified:

bootstrap - shift online responsive form to right

How do I move the online form on the below beta link to the right about 20 px so it lines up with the copy better.  Right now, it hangs to the left too far.


http://www.wiplastic.com/contact_good.html
http://www.wiplastic.com/wiplastic2.css
0
nsitedesigns
Asked:
nsitedesigns
  • 7
  • 5
1 Solution
 
nsitedesignsAuthor Commented:
Actually, I would like it to fill up more of the right side of the content area too.  How do I do this?  When I tried to make a div to contain the form it was no longer responsive.
0
 
GaryCommented:
Add
#cntctfrm {
padding-left:20px
}

Here
<div class="content col-xs-12 col-sm-9">
<div class="col-sm-12">
<h1>Contact Us</h1>


remove col-xs-12 col-sm-9
0
 
nsitedesignsAuthor Commented:
perfection - as usual Cathal!
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
nsitedesignsAuthor Commented:
I figured the fix would be the same for the RFQ page but it doesn't line up the form with the text nicely like it does on the Contact page.  Any idea why?  I would think it should since they have very similar code and both call to the same css page.

http://www.wiplastic.com/rfq.html
0
 
GaryCommented:
Add #rfqfrm to the css above.
0
 
GaryCommented:
I might be inclined to adjust that layout so you have more fields on the same line.

Looks a bit silly having such large inputs on desktop screen. I would add col-sm-6 to your form-group divs.
Name/Company to one line
City/State/Zip I would move to one line.
And telephone/email to one line.
0
 
nsitedesignsAuthor Commented:
Duh, I should have figured that one out.  I think I am letting bootstrap freak me out a bit.  Sorry for the extra work.

I did modify the fields for name and company.  You are right. That does look better.  How do I bring c/s/z into one line?  I figured out I needed to put col-sm-4 by City, State and Zip fields!  See I am making progress.  But, how do I make the State field smaller so there is more room for the City.  In USA, we abbreviate states so we only need room for 2 letters.
0
 
nsitedesignsAuthor Commented:
Dang, looks like i messed up the email one.  Email stays on one line and the field drops down below.

http://screencast.com/t/mqDeoyZfioiz
0
 
GaryCommented:
Go col-sm-5, col-sm-5, col-sm-2 respectively, 2 cols should be fine for the zip.
Just mess around with the number of columns, but I think that should work.

You have an error tho

<div class="form-group col-sm-6" col-sm-4>
<label for="exampleInputCity">City</label>


col-sm-4 is outside the class.
0
 
nsitedesignsAuthor Commented:
Fixed the error.  Still having problems with the email box.  It is not next to field name.

In middle size, the email field box drops below the telephone set.  It is ok on the other sizes.
It seemed to work ok before...
0
 
GaryCommented:
Set email and telephone to col-sm-6
0
 
nsitedesignsAuthor Commented:
Thanks!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 7
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now