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:

This is how it looks when you increase its size:

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

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Open Theme Builder
  • Step 2: Copy the code
  • Step 3: Paste the code
  • Step 4: Publish

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; }

• 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.

• 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: 

• Apply Custom CSS from ShortPoint Theme Builder
• How to Modify Margins for the Lightbox Popup
• How to Increase the Logo Size in Modern Pages (Office 365)