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

Isaac Russell
Isaac Russell
12,091 Points
Posted by Isaac Russell
Isaac Russell
12,091 Points

Responsive Design

I need help keeping my images aligned with their corresponding input field. I have built a form and it seems that when I enlarge my window size above 1293 pixels one of the images (fixed windows image) jumps up a line. And then when the window size is below 496 pixels the images don't stay inline. I have tried to solve this by resizing the images and also with some css rules, but I'm still struggling with it.

I need to learn more about breakpoints. Is their some sort of way I can employ a rule to fix this? I have yet to learn this aspect of webdesign fully.

Any advice or suggestions would be greatly appreciated.

When you go to the form you will need to check "Window Cleaning" to have the images appear.

The form is live here: http://dev.clearlycleanwindowwashing.com/pricing/

Thanks!

2 Answers

Alexander Sobieski
Alexander Sobieski
6,555 Points
Alexander Sobieski
Alexander Sobieski
6,555 Points

I'm totally not seeing any images.

Take the "Build a Responsive Site" deep dive. - EVERYTHING you need is there.

The short answer is you use an @media query to over-ride the CSS every time you hit a break-point. - When you hit a break-point, you can choose to hide the image, change its size or position (or the fonts and other elements around the image), or you can serve-up another image.

I hope that helps as a starter. (though I couldn't see any images when I looked at your link and clicked the check-boxes)

Isaac Russell
Isaac Russell
12,091 Points
Isaac Russell
Isaac Russell
12,091 Points

My apologies, I didn't update the url address for the pics. I developed it locally then transferred it locally. The pics should be available now. Thanks for the advice. I'll start watching the the deep dive now.