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

Anton Moritz
Anton Moritz
5,490 Points

Why isn't my submit button's width 100%?

Hi,

I am currently redesigning my personal website and portfolio, and I can't get my contact form to be how I want it.

Go to my testing website projects.antonmoritz.com

As you can see, the blue "Send" button is not as wide as the other input elements. If you take a look at the code, all the elements have a width set to 100%, so I don't understand why it does this.

Anyone who can help me?

Best, Anton Moritz

can't you manually set the width within css to a specific pixel size?

btw your site looks awesome so clean.

Anton Moritz
Anton Moritz
5,490 Points

Jake Simon No, I can't set a fixed width, since every width on the site is in percentage to make it responsive.

Thanks for the feedback. Do you think visitors understand that my navigation menu is made of the three icons in the bottom instead of the top? I wanted to make something different.

The 3 icons at the bottom? it's really vague i would put specific heading under it so it will read better. so the user understands what each button is before clicking it.

James Barnett
James Barnett
39,199 Points

If you are still having issues with it create a reduced test case using codepen

Anton Moritz
Anton Moritz
5,490 Points

Jake Simon Yeah, that's what I thought too. I might use tooltips that appear when hovering the icons, since that is a more simplistic and clean way to give some context. What do you think?

Anton Moritz
Anton Moritz
5,490 Points

James Barnett I tried making a simple CodePen that shows this scenario.

Take a look at http://cdpn.io/Gnqgb

As you can see, the submit button is still not 100% wide.

What do you think?

2 Answers

Anton Moritz
Anton Moritz
5,490 Points

Jake Simon James Barnett Mario Blokland Woho!! I solved it by putting the box-sizing to "border-box".

Thank you all for your help!

Best, Anton

I think you have a problem with the cascade. If you put "padding: 0;" in ".talk .contact form input, submit", your button will be as wide as the other elements. But the height in fact reduces. I would check your stylesheet.

P.S. don't just erase the padding. You have got to put the padding: 0 inside. Thatswhy I think you have a problem with your cascade.

Did you make up the page only with treehouse knowledge? Simple page but looks very good :-)