Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ryan Bent
Ryan Bent
6,433 Points

Styling contact forms

After researching several tutorial websites and stackover flow. I can't find the answer to what i'm looking for. I have a video and opt-in form in the beginning of my web page and i can seem to size my opt-in form to match close to width of the video What is some basic css that i would need to use for the form i can pm the code if needed

7 Answers

hum4n01d
hum4n01d
25,493 Points
hum4n01d
hum4n01d
25,493 Points

Can you please show us your code? (You can use something like codepen.io or jsfiddle.net)

Ryan Bent
Ryan Bent
6,433 Points

yes

Ryan Bent
Ryan Bent
6,433 Points

http://jsfiddle.net/m304mc6e/

i can screen shot it and email it if you like, as well. Essentially i want the form to be in the same row as the video but the form being close to the same size as the video window

hum4n01d
hum4n01d
25,493 Points

Ok, here's what I got. First of all, what do you want the width of the video to be? Second, you could just set the form and video to 100%

video, form {
     width: 100%;
}

Then they will be the same and take up the whole width of the page

Ryan Bent
Ryan Bent
6,433 Points
Ryan Bent
Ryan Bent
6,433 Points

that worked, but It my background image and is no longer showing the images in my form header. Do I need to <div> each part of my form, so the images will show?

hum4n01d
hum4n01d
25,493 Points

I don't have your background image's file, so I can't see that.

Ryan Bent
Ryan Bent
6,433 Points
Ryan Bent
Ryan Bent
6,433 Points

how would I fix it to make sure the background pic shows?

hum4n01d
hum4n01d
25,493 Points

Please make the background image an image from the web with the same dimensions so that I can see what it looks like.

Ryan Bent
Ryan Bent
6,433 Points
Ryan Bent
Ryan Bent
6,433 Points

if i pushed it on github, would that help?

hum4n01d
hum4n01d
25,493 Points

I don't use github, but maybe.

Ryan Bent
Ryan Bent
6,433 Points
Ryan Bent
Ryan Bent
6,433 Points

okay, i'll push it and give you the link

Ryan Bent
Ryan Bent
6,433 Points
Ryan Bent
Ryan Bent
6,433 Points

Here's the look I'm trying to achieve

http://www.elitekettlebellclub.com

hum4n01d
hum4n01d
25,493 Points
hum4n01d
hum4n01d
25,493 Points

Sorry, but I don't know if I can help, I tried to mess with the width, float and display values, but I couldn't get it to look right. Also, you could put them both in a wrapper. That could help you get around some sing issues (size the wrapper instead of the video)

Ryan Bent
Ryan Bent
6,433 Points

Alright I'll try that. Thank you for all your help. I really appreciate it!

hum4n01d
hum4n01d
25,493 Points

No problem!