Search code examples
htmlcssimagescaling

Simple Lightbox not scaling correctly

I am making a website about World Heritage Sites and wanted to make a dynamic gallery website using simple lightbox.

It was going great then I decided that the website would look better if I would scale up the entire website using

<body class="entire-webpage"></body> then using
.entire-webpage{zoom:175%;} for the css.

However, then the images once clicked do not scale correctly and I can only see the top left quarter. Gallery image not working

I am using the css provided from the website Simple Lightbox so I am not sure what part of the css I am supposed to change.

Thank you so much.

Solution

  • Is there a reason you're using zoom here?

    If you're looking to increase font size, I you could just increase the font relatively using rem.

    body {
  font-size: 2rem;
}

    which gives a similar effect without scaling anything structurally. (Remember to remove both the zoom class from body and from .sl-wrapper)