If you have a link in your ShortPoint design element, that opens in a lightbox popup, and you would like to modify the margins for it, this article is for you.

Image content inside a lightbox popup

Before:

After:

SharePoint list item inside a lightbox popup

Before:

After:

It is possible to achieve this result, adding some Custom CSS to the Theme Builder. Please, follow the steps below.

TABLE OF CONTENTS

• Prerequisites
• Step 1. Open the ShortPoint Theme Builder
• Step 2. Prepare and copy the custom CSS code
  • Option 1: Content from the URL is an image or a video
  • Option 2: Content from the URL is a SharePoint list item or another page
• Step 3. Apply the custom CSS in the Theme Builder

Prerequisites

• You have a ShortPoint Design Element with a link to some other content (image, video, other pages or lists etc.).
• You have chosen lightbox as a linking option.

Step 1. Open the ShortPoint Theme Builder

Open Settings on your page and select Site contents from the drop-down:

Open ShortPoint Dashboard:

Click to open Theme Builder:

Click Customize my site:

Step 2. Prepare and copy the custom CSS code

Depending on the content type inside the URL, we will be using different CSS codes.

Option 1: Content from the URL is an image or a video

Here is a piece of code we will use:

.mfp-figure figure{
    margin-top: 70px;
    margin-left: 100px;
    margin-right: 20px;
    margin-bottom: 70px;
}

Note: You can modify the values to your own, as well as leave only some margin properties (e.g., top and left). Also, you can set the same margin value for all the sides, using margin property, as shown below:

.mfp-figure figure{
    margin: 70px;
}

/* to select the parent element (container) */
div.Files-rightPaneInteractionContainer > div.Files-rightPanePushedContainer > div {
  /* if the height or the width exceeds the frame (allow scrolling) */
  overflow: auto;
  /* the child (the content itself) */
  > div.od-ListItemFormRoot {
    /* any value for the margin */
    margin-top: 20px;
    margin-left: 40px;
    margin-bottom: 10px;
    margin-right: 20px;
    /* add this if want the margin to be calculated with the height or the width */
    box-sizing: border-box;
  }
}

Note: You can modify the values to your own, as well as leave only some margin properties (e.g., top and left). Also, you can set the same margin value for all the sides, using margin property, as shown below:

margin: 20px;

Step 3. Apply the custom CSS in the Theme Builder

In the Theme Builder menu, navigate to Utilities > Custom CSS:

Paste the copied CSS code from the step 2 to the Custom CSS field, and click Apply:

Save your customizations by pressing Publish button:

That's it. Now the margins of your lightbox popup will be changed.

Related articles:

• How to Increase the Size of the Lightbox Popup
• Managing Paddings and Margins for ShortPoint Elements