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

Posted by Kisha Spencer
Kisha Spencer
2,419 Points

Need help with responsive page

I've adjusted my width, margin, and padding for my gallery using %. But when I shrink the browser the whole gallery itself shrinks like its not wrapping. and even when I did a responsive page, it's still doing the same thing. Can someone help me?

John Burkhard
John Burkhard
16,314 Points
John Burkhard
John Burkhard
16,314 Points

Can you post your CSS rule that is targeting the gallery?

Kisha Spencer
Kisha Spencer
2,419 Points

img { max-width: 100% }

gallery {

margin: 10% 0 0 10%; padding: 0; list-style: none; }

gallery li {

width: 45%; float: left; margin: 0.5%; }

This is what I used. My pictures are 2 in a row. I'm trying to get it to when I shrink the browser the pictures don't shrink so small with the browser

2 Answers

John Burkhard
John Burkhard
16,314 Points
John Burkhard
John Burkhard
16,314 Points

Look into adding a media query for your page so that when your browser changes sizes then the CSS rules adjust to the new size.

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

Kisha Spencer
Kisha Spencer
2,419 Points

Thanks, but that's not it. When I removed the img {max-width} 100% css rule it goes back to normal. I think that's the problem because then the images doesn't shrink. I'm going to look at some youtube videos and hopefully I can fix the problem.

John Burkhard
John Burkhard
16,314 Points
John Burkhard
John Burkhard
16,314 Points

Would have to see the page and the markup to really help you any further, its hard to get an idea of what you're trying to accomplish without having a reference.

Kisha Spencer
Kisha Spencer
2,419 Points
Kisha Spencer
Kisha Spencer
2,419 Points

Thanks, but I figured it out. I needed to put the media screen to a max width of 600 and instead of putting it on the responsive page, I put it on my html page. A little different than what I did on the responsive tutorials.