BuddyDev

Search

How do I increase the size of images and video in the lightbox?

  • Participant
    Level: Enlightened
    Posts: 42
    Shannon Belletti on April 24, 2020 at 11:57 pm #29253

    Any update Brajesh? This is a big piece for our group and I don’t want to miss the update. Thanks!

  • Keymaster
    (BuddyDev Team)
    Posts: 24232
    Brajesh Singh on April 25, 2020 at 12:36 pm #29255

    Hi Shannon,
    I will need some more time before I can check the media query and post. I will do it early next week now.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 42
    Shannon Belletti on April 25, 2020 at 3:07 pm #29262
    This reply has been marked as private.
  • Keymaster
    (BuddyDev Team)
    Posts: 24232
    Brajesh Singh on April 26, 2020 at 5:19 pm #29291

    Hi Shannon,
    Please use the following css and adjust the vh as needed

    
.mpp-lightbox-with-comment-media-container .mpp-lightbox-single-photo img {
	
	max-height: 90vh;
}

    vh stands for viewport height.

    Regards
    Brajesh

  • Participant
    Level: Enlightened
    Posts: 42
    Shannon Belletti on April 27, 2020 at 5:10 pm #29322

    Hmm. Still doesn’t seem to work. The portrait images are being scaled to fit width but are still scrolling off the screen.

  • Participant
    Level: Enlightened
    Posts: 42
    Shannon Belletti on April 27, 2020 at 5:46 pm #29323

    A little more information… I can make the browser TALLER and nothing changes. The portrait image still scrolls off the screen. If I make my browser LESS WIDE, then the image resizes and fits in the container. If I make the browser WIDER, the image scales and then requires scrolling.

    So it’s something to do with the width as well as the height. The viewport height is being ignored (even tried setting it to !important) and the width seems to be affecting whether or not portrait images are being scaled correctly.

    Horizontal/landscape images seem to work just fine.

  • Participant
    Level: Enlightened
    Posts: 42
    Shannon Belletti on April 27, 2020 at 5:56 pm #29325

    Got it! I realized the CSS wasn’t referencing correctly. Changed to this:

    .mpp-lightbox-media-entry img, .mpp-lightbox-with-comment-media-entry img
    {
    height: 90vh!important;
    }

  • Keymaster
    (BuddyDev Team)
    Posts: 24232
    Brajesh Singh on April 27, 2020 at 7:28 pm #29331

    Thank you.

    I was only targetting lightbox which had comment and media both. Your code targets both lightbox.

    Also, adding !important will allow overriding with most of the themes. I was trying to avoid and using specificity which might not work in all setup.

    I am glad it is resolved.

    Regards
    Brajesh

You must be logged in to reply to this topic.

This topic is: not resolved