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

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