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

andreawalkup
andreawalkup
2,365 Points
Posted by andreawalkup
andreawalkup
2,365 Points

Image gallery help

I'm trying to adapt this HTML/CSS (originally found at https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive) to a gallery for my site. This code displays four images across on screens larger than 700px wide. I'd like to display only THREE images across on 700px+ screens, but keep the responsive design for smaller screens as is.

Suggestions for how to adjust the CSS for a row of three images across?

<!DOCTYPE html> <html> <head> <style> div.gallery { border: 1px solid #ccc; }

div.gallery:hover { border: 1px solid #777; }

div.gallery img { width: 100%; height: auto; }

div.desc { padding: 15px; text-align: center; }

  • { box-sizing: border-box; }

.responsive { padding: 0 6px; float: left; width: 24.99999%; }

@media only screen and (max-width: 700px) { .responsive { width: 49.99999%; margin: 6px 0; } }

@media only screen and (max-width: 500px) { .responsive { width: 100%; } }

.clearfix:after { content: ""; display: table; clear: both; } </style> </head> <body>

<h2>Responsive Image Gallery</h2>

<div class="responsive"> <div class="gallery"> <a target="_blank" href="img_5terre.jpg"> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div>

<div class="responsive"> <div class="gallery"> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div>

<div class="responsive"> <div class="gallery"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div>

<div class="responsive"> <div class="gallery"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">Add a description of the image here</div> </div> </div>

<div class="clearfix"></div>

</body> </html>

1 Answer

furkan
furkan
11,733 Points

Have you tried increasing the width for the class .respsonsive for this part of your code:

 div.gallery { border: 1px solid #ccc; }

div.gallery:hover { border: 1px solid #777; }

div.gallery img { width: 100%; height: auto; }

div.desc { padding: 15px; text-align: center; }

{ box-sizing: border-box; }
.responsive { padding: 0 6px; float: left; width: 24.99999%; }
andreawalkup
andreawalkup
2,365 Points
andreawalkup
andreawalkup
2,365 Points

Yes, you are right and I just figured it out! Thank you. It works if I change it to

.responsive { padding: 0 6px; float: left; width: 33.3333%; }

Seems obvious now. Appreciate the answer.

furkan
furkan
11,733 Points

You are very welcome. Sometimes it is very good to make mistakes, helps you learn a lot even from small mistakes.

Glad that helped, happy coding ?