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

Design Photoshop Foundations Slices & Save for Web Introduction to Slicing

Todd Squitieri
Todd Squitieri
8,001 Points
Posted by Todd Squitieri
Todd Squitieri
8,001 Points

Fully 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
Mika Kujapelto
6,261 Points
Mika Kujapelto
Mika Kujapelto
6,261 Points

If 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.

Ivan Franzone
Ivan Franzone
7,328 Points
Ivan Franzone
Ivan Franzone
7,328 Points

Well, what you are saying about that class " .img-responsive" It just to set to our images "max-width:100%"

vryiziilos
seal-mask
.a{fill-rule:evenodd;}techdegree
vryiziilos
Full Stack JavaScript Techdegree Student 23,052 Points
vryiziilos
.a{fill-rule:evenodd;}techdegree
vryiziilos
Full Stack JavaScript Techdegree Student 23,052 Points

To 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
Todd Squitieri
8,001 Points
Todd Squitieri
Todd Squitieri
8,001 Points

Whoa, 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