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

kevinardo
seal-mask
.a{fill-rule:evenodd;}techdegree
kevinardo
Treehouse Project Reviewer
Posted by kevinardo
.a{fill-rule:evenodd;}techdegree
kevinardo
Treehouse Project Reviewer

Fluid image adapting to viewport.

Hi mates.

Im currently working on a new website for a client and one of my sites used for inspiration is www.marcogrill.com (absolutely awesome restaurant page)

I would like to accomplish their slider effect that adapts to the viewport size: for ex, if you resize your browser and refresh you will see that the slider img adapts to the new size, making the experience look the same when launching the site from different computer screens.

I have analyzed the code a bit and some keywords are liquid, flexview but im not gonna get any wiser trying to figure this out all by myself. So im reaching out to the great treehouse minds!

What would be my best approach to accomplish this?

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Before you get too far into this I'd suggest you take a look at http://shouldiuseacarousel.com/

2 Answers

Tom Bedford
Tom Bedford
15,645 Points
Tom Bedford
Tom Bedford
15,645 Points

This Treehouse blog post may help give you some ideas. While it only deals with a single image I'm sure the techniques could be adapted.

Adam Sackfield
PLUS
Adam Sackfield
Courses Plus Student 19,663 Points
Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You would need to target the slider and images with media queries and change the sizes. You can do this with chrome add ons to give page dimensions when you resize browser and wherever it starts to break you can add a media query at that point.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

There's an app for that ... responsive inspector it's a Chrome extension that shows you all the break points a site is using.