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

Guillermo Sequeira
Guillermo Sequeira
9,297 Points

My Media Queries are not working as they are supposed

I've been working on this website (sorry it's in Spanish): https://gruposct.herokuapp.com/ and applied the responsive design techniques discussed on the Treehouse videos. I have uploaded it to Heroku and on the web it seems to work as it's intended to. But whenever I try to see the results either on my phone (LG G2 Mini) it doesn't display the way it should display and all the content looks really small and it's really hard to read. Also both for my phone and my tablet (iPad Air) the background images look terrible. I don't know if any of you have any reccomendation for that.

Here is my Github repo on the CSS in case you might be curious: https://github.com/seque1990/sct/blob/master/app/assets/stylesheets/sct.css.scss

Thank you very much in advance.

1 Answer

Máté Végh
Máté Végh
25,607 Points

You have to use the viewport meta tag: <meta name=viewport content="width=device-width, initial-scale=1">

Just copy it to all your HTML files' head section.

Read this article for more info: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag

Guillermo Sequeira
Guillermo Sequeira
9,297 Points

You're incredible. It works perfectly. Thank you very much.

Máté Végh
Máté Végh
25,607 Points

I'm glad I could help! Good luck!