lightbox responsive image


Topic: lightbox responsive image

Karman40 pro premium asked 3 months ago

Dear Support!

While using the lightbox, I thought I discovered the following error.If the image is smaller than the screen, the image will be enlarged to the size of the screen and will not stop at the actual maximum size, so the resolution will be out of focus, poor quality image,

Can this be fixed somehow?

I liked the caption better in v4. Not a full-width strip at the bottom, but a box in the middle. Can this be solved in the new version somehow?

MDB version4: (better, caption)enter image description here

MDB version 5: (image is not responsive, caption not beauty)enter image description here


Arkadiusz Idzikowski staff answered 3 months ago

You can override caption styles to customize its appearance, for example:

.lightbox-gallery-caption-wrapper {
  height: unset;

  & .lightbox-gallery-caption {
    max-width: 50%;
    overflow: visible;
    white-space: normal;
    text-overflow: unset;
    margin: 10px;
  }
}

Could you provide more detail about the resolution of the image you used?


Karman40 pro premium commented 3 months ago

@Arkadiusz Idzikowski

enter image description here

Image download url


Arkadiusz Idzikowski staff commented 3 months ago

@Karman40 Thank you, we will use this information to reproduce the problem on our end and let you know what we found.


Karman40 pro premium commented 1 months ago

@Arkadiusz Idzikowski Did you find the error?


Arkadiusz Idzikowski staff commented 1 months ago

@Karman40 We haven't had time to check that in more detail yet, but we have started working on some fixes for this component and we will also check this problem.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 1.6.1
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No