Remember me

Huge lightbox margins in mobile

7 years 4 months ago #1

  • Ilkka Rytkönen's Avatar
  • Ilkka Rytkönen
  • Posts: 29
I'm almost finished to get the Gallery working almost perfect way. Only thing is that lightbox has very huge margins in mobile browser. Can those big margins remove from top and bottom? Only 1/3 of the picture will be seen without that dark margin. Example photo with the margins about screenshot when photo is loading.

7 years 4 months ago #2

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hello,

But it's not a margins, it's gradient overlay, and it does not affect on the image size in the lightbox.
Pictures in the lightbox is fully visible





Regards,

7 years 3 months ago #3

  • Ilkka Rytkönen's Avatar
  • Ilkka Rytkönen
  • Posts: 29
I see. But gradient is on the photo so photos are a bit darker than they should. Also photos with sky or other looks bad because of edge of the gradient is that much visible.
Attachments:

7 years 3 months ago #4

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hi,

Try this:
.ba-modal .header-icons, 
.ba-modal .ba-modal-header {
    box-shadow: none !important;
}

Place code into your template custom.css file

Regards,

7 years 3 months ago #5

  • Ilkka Rytkönen's Avatar
  • Ilkka Rytkönen
  • Posts: 29
Thanks but it didn't help. I removed the custom css after trying it.

7 years 3 months ago #6

  • Artem's Avatar
  • Artem
  • Posts: 11342
Hi,

Try this one
@media (max-width: 1024px) {
    .gallery-modal .ba-modal-header, 
    .ba-modal .header-icons {
        box-shadow: none !important;
   }
}

Regards,

7 years 3 months ago #7

  • Ilkka Rytkönen's Avatar
  • Ilkka Rytkönen
  • Posts: 29
Thanks, but it didn't change it at all.

Is it possible to remove whole gradient? It's not good on the iPad too.

7 years 3 months ago #8

  • Artem's Avatar
  • Artem
  • Posts: 11342
it's a 100% working code!

Here are screens:

original:



With code:



Try to clear Browser and Joomla cache

Regards,
Powered by Kunena Forum