Solved

bootstrap - shift online responsive form to right

Posted on 2014-03-06
12
458 Views
Last Modified: 2014-03-06
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
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 5
12 Comments
 

Author Comment

by:nsitedesigns
ID: 39909661
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39909701
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
 

Author Closing Comment

by:nsitedesigns
ID: 39909742
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!

 

Author Comment

by:nsitedesigns
ID: 39909996
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
 
LVL 58

Expert Comment

by:Gary
ID: 39910018
Add #rfqfrm to the css above.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39910076
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
 

Author Comment

by:nsitedesigns
ID: 39910292
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
 

Author Comment

by:nsitedesigns
ID: 39910305
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
 
LVL 58

Expert Comment

by:Gary
ID: 39910306
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
 

Author Comment

by:nsitedesigns
ID: 39910376
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
 
LVL 58

Expert Comment

by:Gary
ID: 39910415
Set email and telephone to col-sm-6
0
 

Author Comment

by:nsitedesigns
ID: 39910437
Thanks!
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question