Trouble with Responsive elements of my website - AAAAAGHHH - HELP!!

This is why I don't like using BootStrap. I find it unethical for developers, especially newbies like myself, because it clusters so much junk. I guess that's why it's more suited to designers... I guess.

I'd say the fastest way to fix this is by using the position: absolute; on the elements you wouldn't like re-sizing. There could be a more efficient way, but I'm still new. If anyone else wants to step in, please, be my guest. I fixed it using the 'Inspect Element' option on my Chrome browser.

http://puu.sh/2uehH

As you can see, all I did was throw position: absolute; at the bottom of the form#Qform selector.

My method is probably the last thing you would wanna use since you're looking at creating responsive designs and eliminating multiple CSS sheets for other devices. Just throwing in a temporary fix and my two cents.

Just a suggestion.

I had a quick look at your site.

I use Opera and the "Get Free Life Insurance button" doesn't fit the page.

There is alot going "on" on that home page. In my opinion to much. Break info into little chucks.

All the verbage on the first page about What life insurance is etc. should be moved off to another.

Your CTA is "Get the best the quote". That should be your focus. All the other info is fluff. (people know what life insurance is and when you have a face to face then you explain in more detail but at that moment you are selling right now think marketing)

Remember what your end goal is. You want basically to harvest and collect email addresses. So

you can send special offers at a later date.

I like your form. Its clean and professional. Now if you focus on scaling that form only with contact info your problem will be considerably easier.

Hope this helps

Moe

I'd say the fastest way to fix this is by using the position: absolute property

Remember, position absolute corrupts absolutely

Seriously though, there's (usually) a better way to position elements on the page.

Check http://learnlayout.com to learn about them

Not looked at this terribly in-depth but you are not using the class of row fluid

Not sure if that will help

Also you are rocking some fixed widths and not %

.span5 { width: 380px; }

I will echo what has been said: Don't rely on Bootstrap or any other framework until you understand how to do things from scratch.

Here's the first fix:

.form-wrapper { width: 100%; }

You'll have to fix that in the Bootstrap CSS file. You can use that when the window is smaller. Change the width accordingly for larger screen resolutions.

Next, you are going to have to figure out the structure of your page a little better, and how you can either rearrange or choose what and what not to display at different sizes.

Hope that helps start you on the right direction.