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


I am having a problem with my lightbox 2 gallery being responsive

I have created a gallery on my fictitious business using my own personal website using the original light box. The problem I am having is making the lightbox images responsive. Presently I have them at 4 across and I would like them to be 2 across for mobile. I have been looking for solutions to this for several house and am unable to get an answer. Here is the website: www.monikaandersondesign.com/gallery.html When I make changes to my responsive.css file it takes no effect. Right now my styles for this images are as follows:

.thumbnails a { float: left; width: 25%; padding-right: 15px; margin-bottom: 15px; box-sizing: border-box; }

When I open up my responsive.css and add this code and modify it, it does not make the change or it will change it to 2 across at the desktop and 4 across on the mobile version. I am not sure what I am doing wrong. Thanks

2 Answers

Patrick Koch
Patrick Koch
40,496 Points

Hi Monica,

first , nice site, What I understood instead of 4 Images in a row you would like to have just 2 Images in on tablets and cellphones?. Well one option is to user "Media Querys"!. Media Querys let you add certain css styles for defined with with of the screen. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries there are also some treehouse courses for that topic.

About where you should edit the css, when I inspect your site the Style tells me: "stylenew.css line 250

.thumbnails a {
    float: left;
    width: 25%;
    padding-right: 15px;
    margin-bottom: 15px;
    box-sizing: border-box;

so if you change the width just to 50% it displays just 2 thumbnails, in all screen sizes If you want to display 2 thumbnail till the screen reaches 1000px (for example) just change it with to 50% and add this query.

.thumbnail a{
 width: 50%;

@media screen and (min-width: 1000px){
  .thumbnails a {
    width: 25%;

so in words, the width of thumbnail a is 50% till the browser width hits 1000px, then the width is of thumbnail a is 25%.

You can exchange the 1000px width any with you like, its alos possible to add multiple media query for example, just show one image on phones, 2 images on tables, 3 images laptops and so on.....

I hope I could help! If you have further questions or if more questions, just let me know.

ps. plz make a button to mute the sound :-)

greetings patrick

Thanks Patrick this solved it. yes I have worked with media queries and I need to learn more. Thanks again.