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 Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Why does my button fill most of the screen? And how to fix it?

I am trying to make a nice 3d button now without flexbox. (From this tutorial https://www.youtube.com/watch?v=rGbvleD6gFU) Now it's filling almost the whole browser, how do I get it in a normal size again?

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

Are you building this using a Treehouse Workspace? If so, you could make a snapshot of your workspace and post the link to it here.

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You have a few issues in your CSS and HTML:

  • two slashes (like on line 43 of main.css) do not indicate a comment in CSS
  • rows of dashes also do not indicate a comment in CSS
  • CSS comments look like this :point_right: /* this is a CSS comment */
  • once the comments are fixed, the "button" appearance will change
  • Id names cannot have a period character in them (index.html line 40, main.css line 95)
  • margins (main.css line 96) are subject to vertical collapse, you may want to use padding instead
  • with appropriate top and bottom padding you can eliminate all those <br>'s
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

That helped a lot, some of those points I wouldn't have figured out on myself. Many thanks.

Learning coding
seal-mask
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points
Learning coding
.a{fill-rule:evenodd;}techdegree
Learning coding
Front End Web Development Techdegree Student 9,937 Points

Yes, forgot to post that, it's https://w.trhou.se/bhaaes6vb3.