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.
Anton Moritz
5,490 PointsWhy 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
Eddy Valna
Courses Plus Student 3,978 Pointsbtw your site looks awesome so clean.
Anton Moritz
5,490 PointsJake 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.
Eddy Valna
Courses Plus Student 3,978 PointsThe 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
39,199 PointsIf you are still having issues with it create a reduced test case using codepen
Anton Moritz
5,490 PointsJake 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
5,490 PointsJames 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
5,490 PointsJake 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
Mario Blokland
19,750 PointsI 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.
Mario Blokland
19,750 PointsP.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 :-)
Eddy Valna
Courses Plus Student 3,978 PointsEddy Valna
Courses Plus Student 3,978 Pointscan't you manually set the width within css to a specific pixel size?