Lightbox Gallery sizing

HTML-CSS
1

Hello everyone,

i am relatively new and very proudly starting on my first projects. I am currently editing a super old website. The owner of the site wanted a new gallery and I applied the Freecodecamp lightbox tutorial: How to Create a Lightbox Using HTML, CSS, and JavaScript

Unfortunately I am unable to get the pictures that appear in the lightbox smaller with the CSS. Right now, when you click in a picture, it appears really big on the screen and you have to scroll to see the whole picture. I tried to edit the modal contents width in the CSS, but it will take the top of the picture off instead of resizing it.

It would be really really great if you guy could help me.

Thank you so much in advance.

This is the website: Ferienwohnung Groemitz Ferien Ostsee Urlaub Groemitz Angebote

Kind regards from Germany,

Marcy

2

I found the solution. Sometimes it gets you thinking when you ask questions. If anybody is interested. It was wrong to change the width of the module-content.

I had to change the width of the image-slide, set it to flex and center the image:

.image-slide {
  width: 40%;
display: flex;
margin: auto;
}
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.