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 Justin Riley
Justin Riley
3,175 Points

getting past media queries. pounding my head against a wall

Ok everyone. I understand media queries...well there use. I feel I don't know enough to put inside them to make the site responsive. Its bugging me so much I cant get past it.

nicholas hartford
nicholas hartford
24,276 Points

The way I understand it is that, Media queries are different sets of rules for different screen resolutions. By starting with a base set of rules for say, a mobile device with 320px screen width, for instance, you can use media queries to adjust the content on the screen to better fit the larger screen sizes. For example, making the Logo large and centered on the page for mobile and small and to the right for larger screens. You would use media queries for that. To be responsive you should design your site for mobile first and increase the screen size until it breaks(doesn't look good anymore) and add a media query to adjust what doesn't work correctly. I hope this helps.

Justin Riley
Justin Riley
3,175 Points

That's the issue, I just dont think i know enough CSS yet to use them and im worrying too much about it.

take my portfolio: walrusdev.com my first full site, I dont know what needs to be used to keep the thumbnails from stacking. I also cant seem to find a decent guide.

I suppose I just need to keep plugging away. I also need to focus on the mobile first idea. I dont truly understand it? are you using smaller sizes for your fonts and such then using the query to expand it? instead of the other way?

thanks again to everyone. Justin

1 Answer

nicholas hartford
nicholas hartford
24,276 Points
nicholas hartford
nicholas hartford
24,276 Points

Sounds like you just need some more practice is all. You can specify the font size for each element as a rem. And then just change the px size of the root element in the media queries. Rem uses the root element such as what is specified for the html element tag and uses that as the reference size. I would recommend doing some of the web design courses as they are heavy on the css and general styling. Your site looks good though. It definitely takes time to get good at anything. Also look into bootstrap. Specifically flexible layouts. It does a lot of the work and is really easy to learn. Good luck on your journey I wish you the best.

For example: //320px screen size (mobile) html { Font-size: 16px } //text within html tags .header-text { Font-size: 1.2rem; }

//media query for tablet size @media only screen and (min-width: 740px) { html { Font-size : 20px; } } //Scales every text element within html tags with one rule. // use min width for mobile first design