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 Sonja Tomcic
Sonja Tomcic
6,590 Points

My one page website

I made my one page website about my favourite town, but i'm not completely sure how to make media queries, so I will be thankful if someone gives me some suggestions and ideas what shoud I improve.

Here is my snapshoot

https://w.trhou.se/1gm4iyu63c

and link to my website http://port-80-clnfepdq1p.treehouse-app.com/

Simon Coates
Simon Coates
28,695 Points

the design courses encourage designing for mobile, and then having the media rules add (and override) as you scale out. see http://www.w3schools.com/cssref/css3_pr_mediaquery.asp for a basic media query. Plus a one column layout is pretty easy as a lot of elements can just be block elements exhibiting normal behavior.

some (italic) fonts could be smoother (one of the horrible things that happened to me while studying at treehouse is i realized i now have opinions about typography. I don't know what to do with this new knowledge about myself)

a couple images seemed distorted.

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

:x: You can't share a direct URL to your workspace, it's private just for you and only exists while you are using it.
:white_check_mark: But your snapshot is good. :+1:

1 Answer

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

You might want to rethink settings like "padding: 50px 590px;" and "margin: 0 1200px 0 300px;", except for the largest displays these create columns of one word per line, which is potentially difficult to read and at least annoying.

Also, using percentage values for things like this allow your display to adjust for different screen sizes without the need for media queries.

Sonja Tomcic
Sonja Tomcic
6,590 Points

Thank you! Every suggestion is valuable