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

CSS

Posted by James Ingmire
James Ingmire
11,901 Points

Website due for launch tomorrow, need help urgently please. Getting div to move up when responsive image above shrinks.

The following link shows the webpage that I'am stuck on. The container (.treatment-container) under the image slideshow(#slideshow) when the browser is re-sized stays the same position, leaving a gap which is not wanted. I need the div to go up with the image slideshow when re-sized until 980px and then the images stop. The height is set at 550px as I cant get max-height: 550px; and height: 100%; to make the images respond to this. Is there a way to make the height adjust as the images get smaller creating the div below to go up with them.

http://www.balanceosteopathy.co.uk/hidden/index.php

Any help would be much appreciated thank you in advance.

1 Answer

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

Hey, I think it's because you gave the slideshow container a fixed height of 550px, so the images of the slideshow shrinks and give you the impression that they're moving up but the container is still there "transparent", so that's why the treatment images doesn't move up. I'd add media queries to adjust the slideshow container height on different screen sizes.

Btw your webpage is not responsive for mobile devices it looks good until you go lower than 768px. If I was you, I'd add media queries to fix that too. But overall It looks really good.

James Ingmire
James Ingmire
11,901 Points

I know but when i take the height away or change to 100% the images disappear, do you know how I can get the container to be 550px max and then change down, max-height etc doesn't work. Thanks.

Jesus Mendoza
Jesus Mendoza
23,289 Points

How about using percentage?

James Ingmire
James Ingmire
11,901 Points

Tried it. Nothing seems it work :(

Thanks, yea its not a responsive site, just the images under the navigation, meant to shrink to 980px then stop.

Jesus Mendoza
Jesus Mendoza
23,289 Points

You tried setting the html and body height to 100% first? Btw I left you a review about the page in my first post, hope it helps

James Ingmire
James Ingmire
11,901 Points

Yea just seen it thanks a lot mate, good to hear. Just a shame I cant finish it off correctly. :( Tried html, body 100% too.