Responsive lightbox size issues on mobile

So I have two image galleries that work fine on the desktop version but when it is clicked on in mobile, it is super skinny and does not fill the entire screen. I need it to be responsive and fill the entire width of a screen. Also the caption does not center on the image.

  • Sajid

    Hi Gwindylyn,
    Hope you are doing good today :slight_smile:

    Could you please share the link of page here with screenshot so I can take a closer look? I can see you are using an instagram image gallery and not an upfront image gallery.

    Aslo, please enable support staff access as well I login and make some adjustments (if needed). To grant access go to WPMU DEV -> Support -> Support Access -> Grant Access or see this manual.

    Look forward towards your response :slight_smile:

    Best Regards,
    Sajid

  • Nastia

    Hello Gwindylyn

    I hope you are doing well today!

    I visited your page and this is how I see the gallery in mobile view:

    May I ask you with what device and what browser you are viewing this page?

    As for image caption, I can replicate it on my site too and I've reported this to our developers.

    In the meantime, please use the following CSS code to fix this:

    @media screen and (max-width: 768px){
    .upfront-region-lightbox.upfront-region-side.upfront-region-side-lightbox{
        width: 100% !important;
        margin-left: -50%;
        margin-top: -60%;
    }
    }

    Add this to Upfront Editor > Theme Settings > Add custom CSS rules.

    Please note, in some lightboxes the content is quite large and a user will not be able to close them on mobile devices. I will suggest to reduce a little bit the content in these lightboxes.

    I hope this helps!

    Cheers,
    Nastia

  • Gwindylyn

    I thought I specified in my original post that the gallery displays fine but the lightboxes do not. Sorry! The content in the lightboxes is just text so should it not be responsive? If not, can I apply a div tag to them somehow to scale the text down for mobile?

    Also, is there any way to style the caption in responsive mode? Or am I just going to have to wait for a developer to respond to you?

    Oh and if you could delete your screenshot [has company name in it], I would appreciate it. Thanks!

  • Sajid

    Hi Gwindylyn,
    Hope you are doing good today :slight_smile:

    I am sorry for confusion here. The lightbox is responsive and images can be fit according to screen size. However for content it can be a little wonky. However, what we can do here is set the fixed width and enable scrolling so the text can be scrolled and seen on mobile devices.

    Try adding the following code in Upfront -> Theme Settings -> Add custom CSS rules.

    @media screen and (max-width: 768px){
     .upfront-region-lightbox .upfront-plain_txt {
          height: 400px !important;
          overflow-y: scroll;
     }
    }

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Best Regards,
    Sajid

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.