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
Anna Wr贸bel
15,043 PointsHow can I improve my code?
Hi,
Could you please take a look at a website I've just finished? I've never done anything so big before, it was also my first time making website responsive without any framework.
I checked it in Blisk and it looks okay on every device there, but my friend says that it's vertically scrolling on her phone (Android, 480x800px) because of white space on the right side). I don't see anything wrong when I resize browser's window. What have I done wrong?
Also, do you see anything else I should change? As I said, I'm a newbie, I've probably made a lot of mistakes :).
http://anna.pm/starnight/ (I made it from free .psd template).
1 Answer
Daniel Gauthier
15,000 PointsHey Anna,
I checked out the site and first of all, it's looking great :D
As for the white space on the right side, once the screen gets bigger than 1600px (set as the max-width for html and body in your css), white space starts to take up the right side of the screen.
My resolution is 1680 wide, so I've got 80px worth of white space, about an inch worth.
One major issue is that your "Get Started" button starts shifting to the right of the screen and is off-center once the screen goes past 1600px.
I also checked it out on my android and it looks great there as well.
As far as design goes, if you're open to suggestions, the "Download Now" button could potentially fit with the mobile design better if it were centered, since the buttons above and below it are. (Only on the mobile version obviously)
Also in regards to the mobile version, I would also give some consideration to centering the swatches, but this is all personal preference.
Keep up the great work, this is an impressive site already :D
Anna Wr贸bel
15,043 PointsAnna Wr贸bel
15,043 PointsHi Daniel! Thanks for all your suggestions :). I removed the max-width from the body and fixed the "Get Started" button, it should look ok on every resolution. I also centered the "Download Now" button and the swatches. You were right, it looks much better now :). Thanks again for your suggestion and all your kind words :D.