Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Mark Isle
PLUS
Mark Isle
Courses Plus Student 5,735 Points

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

Hi guys, I have just designed a one page site with a form for my uncle. It looks fine at 1200px resolution but as soon as you resize to anything under that the form elements start to break outside the form wrapper and stick out past the border.

http://studio1designs.co.uk/clients/lifeforless

Can anyone help me work out how to fix it? I think it is a problem with the .control-group

6 Answers

Ricky Dodd
Ricky Dodd
3,241 Points

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

James Barnett
James Barnett
39,199 Points

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

Remember, position absolute corrupts absolutely :wink:

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; }

John Locke
John Locke
15,479 Points

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.