Bummer! You must be logged in to access this page.

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 Paul Barron
Paul Barron
6,595 Points

Image Not Responsive

I've tried just about everything and it's driving me nuts. How can I make the "slide-img" image responsive. This is what I have and the website is 132media.com. When I open it on my phone's browser the image is showing way too big. I just realized that the image is doing exactly what I want it to do, but the rest of the site is not filling the screen. 

slide {
    background: black;
    position: relative;
    max-width: 100%;
    z-index: -1;
    margin: 0;
    padding: 0;
}

.slide-img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

4 Answers

Aaron Elliott
Aaron Elliott
11,738 Points

Add this to your stylesheet

html, body{ width:100%;

}

Paul Barron
Paul Barron
6,595 Points

RIght on the money. Both answers. I was doing one, but not with the other. I don't know how I missed the html and body, but I did :(. It's always something so simple ey? Thanks Aaron.

Aaron Elliott
Aaron Elliott
11,738 Points

No Problem Paul,

That would have become an even bigger problem once the JS was introduced to control the slider behavior. For more info on how to build a full page responsive slider I recommend the new JavaScript and jQuery book by Jon Ducket.

Paul Barron
Paul Barron
6,595 Points
Paul Barron
Paul Barron
6,595 Points

You read my mind. I'll give it a look soon.

Paul Barron
Paul Barron
6,595 Points
Paul Barron
Paul Barron
6,595 Points

Aaron Elliott hey I bought the book. Wow! Really does clear up things. Thanks for the recommendation.

Aaron Elliott
Aaron Elliott
11,738 Points
Aaron Elliott
Aaron Elliott
11,738 Points

Hey no problem Paul. Glad the book helped you too.