Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Design

A bit of help with this responsive design?

Hello all,

I'm trying to help my friend out with a little problem they're running into, but I'm not skilled enough to tackle it yet. Her website is http://ranjanigroth.com and her concern is with the image strip on the main page.

She wants to have something to the effect of the following example: http://www.prophoto.com/store/jack-jill/

In the above example, when you change the dimensions of the page, pieces of previously hidden images appear on either side of the center three.

How would she be best able to replicate something like this? Any and all help is appreciated.

Thank you.

2 Answers

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,240 Points

I'm unsure what your question is. Neither of the websites that you linked to are responsive, so is it just the overall design and format that you/she are trying to replicate?

Ryan Field
Ryan Field
Courses Plus Student 21,240 Points

Oh, I think I get what you're saying now. I have a larger screen, so I see those side images by default. I don't think this is responsive as much as it is simply using a wider background than the main image gallery, which, by default, will show as long as the screen has a wider size than it. I haven't been able to pinpoint yet where the image is coming from, though.

Edit: Aha, found it! As I suspected, it's just a really wide image that is used as background-image for the body of the document.

I went with my gut and assumed it was responsive. Maybe I just don't know what that means. haha. In time, I'm sure.

But thanks for the help! I think I'll be able to reproduce something similar now. =)