How can we help you today?

How to Increase the Size of the Lightbox Popup

This article will showcase how to increase the lightbox (popup) window size. This solution is useful when the lightbox looks too small or tight for the content displayed in it.


This is the default size of the Lightbox window:


Lightbox default size


This is how it looks when you increase its size:


increase size


NOTEThis Custom CSS solution will increase the size of all Lightbox windows on your Site Collection.

TABLE OF CONTENTS


Prerequisites


  • You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
  • You must be a ShortPoint Designer with an active license.
  • You must have Lightbox as a Linking Option. Check out Types of Linking Options to learn how to set it up on Design Elements.

Interactive Tutorial

Start the interactive tutorial to learn how to increase the size of the Lightbox:



This is the code used in the interactive tutorial. You can adjust the number indicated in the code to suit your needs:

.mfp-iframe-holder .mfp-content { max-width: 90vw; height: 90vh; }

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to increase the size of the Lightbox:


Step 1: Open Theme Builder

  • Click the cogwheel icon.


Cogwheel icon

  • Select Site Contents.
  • Click ShortPoint Dashboard.
  • Select Theme Builder.
  • Click [1] Classic if you are using a classic site or click [2] Modern if you are using a Modern site.


classic or modern

  • Select Customize my site.

Step 2: Copy the code

  • Copy the code below:
.mfp-iframe-holder .mfp-content { max-width: 90vw; height: 90vh; }
NOTE90 in the code means 90% of the screen width/height. You can adjust this number to suit your need.

Step 3: Paste the code

  • Click Utilities.
  • Select Custom CSS.
  • Paste the copied code in the field provided.
  • Then, click Apply.

Step 4: Publish

  • Once you are satisfied with your edits, click Publish.


Congratulations! You now know how to customize the size of your Lightbox window.


Related articles: 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 11 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more