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.

JavaScript Object-Oriented JavaScript: Challenge Making the Game Interactive playToken() Method Solution

Stu Finn
Stu Finn
3,427 Points

Game pieces don't line up properly with the columns on the game board

Is anyone else finding that the game pieces don't line up properly with the columns on the game board? I tried the code that's in the provided project files and I'm finding the same issue.

Gari Merrifield
Gari Merrifield
9,559 Points

I have not done that course, but I have found that some of these kinds of things happen with different browsers, Firefox being the most common one. Have you tried a couple of different browsers and had the same results?

Stu Finn
Stu Finn
3,427 Points

Gari, that is exactly the issue. I should have known to check in another browser. Thanks!

Deepa Gowda
Deepa Gowda
4,941 Points

I'm executing in Chrome browser and it works fine.

Stu Finn
Stu Finn
3,427 Points

Thanks Deepa - yep, the issue was only in Firefox (developer edition) but Chrome works great.

Same for me, Chrome works fine, but it's completely bugged in Firefox.

3 Answers

Kamaal Farah
Kamaal Farah
15,373 Points

Try fully opening the window, it seems to align correctly if I do that.

Matthew McQuain
Matthew McQuain
14,184 Points

I think Kamaal is correct. When I had the Chrome browser window at 25% of its normal width, the Token did not line up correctly. When I full screened the browser, everything lined up correctly. I think the solution is the CSS code posted above by Ryan.

Ryan Gaspar
Ryan Gaspar
20,200 Points

fixed this with, in the style.css:

  • under #game-board-underlay, delete the line "box-sizing: border-box"
  • under .token, add "left: 16px;"
Stu Finn
Stu Finn
3,427 Points

@garimerrifield and @deepashrichannegowda had it - doesn't work well for me in Firefox but works fine in Chrome.