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 trialTodd Squitieri
8,001 PointsFully Responsive Graphics
First off, I LOVE the whole 90's web-guy shtick. It's hilarious! I need that guy to make more appearances in these tutorials, for sure.
Anyway, I'm looking to make a fully responsive website and am anticipating that the graphics at certain resolutions will need to change drastically, such that the website looks COMPLETELY different at varying resolutions (with different graphics).
My question?
Would you use a simple @media screen code in ONE CSS file to tinker with the graphics or would you make separate css files and have those upload depending on what resolution the use is working on?? Does it make much of a difference?
Any feedback would be awesome.
-T
3 Answers
Mika Kujapelto
6,261 PointsIf you're using a framework such as Bootstrap there's a lot of build in features that you can use. For example for images Bootstrap has a class="img-responsive" that makes images responsive. So check first what the framework offers, if you're using one.
For text I use @media to get it adjusted on smaller screens but there are of course additional ways to do this.
vryiziilos
Full Stack JavaScript Techdegree Student 23,052 PointsTo add to Mika's suggestion for text: if you are comfortable with Javascript and jQuery I recommend using fittext plugin it makes text responsive. I use it a lot for my project as it saves me time.
As far as fully responsive images goes, you can try a slightly different approach. I recommend taking a Treehouse class on responsive images. It will teach you how to deliver different images at different resolutions and devices using 'srcset' and 'picture' element. This not only adds responsiveness to images but also improves website performance.
Hope that helps. Good luck!
Todd Squitieri
8,001 PointsWhoa, I didn't even realize that the possibility to code responsiveness into graphics was out there.
Thanks so much for the tip, Mika! I appreciate it!
Sincerely,
Todd
Ivan Franzone
7,328 PointsIvan Franzone
7,328 PointsWell, what you are saying about that class " .img-responsive" It just to set to our images "max-width:100%"