Skip to main content

Creating a Non-Fullscreen Desktop Popup

In this article, you'll learn how to transform a fullscreen desktop popup into a centered, non-fullscreen layout.

Rojen M Reji avatar
Written by Rojen M Reji
Updated over 4 months ago

Want a more compact, centered popup experience on desktop? In this guide, you’ll learn how to create a non-fullscreen popup that sits neatly in the middle of the screen—perfect for a cleaner, more focused design.

Step 1: Open the Popup Editor

Navigate to your popup editor to begin editing your desktop version.

Step 2: Locate the Fullscreen Containers

Inside the desktop container, you’ll see two containers that cover the entire screen:

  • One is the background layer

  • The other is the top layer (your actual popup content)

Step 3: Select Both Containers

Click on both to confirm they’re full-screen. These layers stack on top of each other to create your current layout.

Step 4: Set Your Background and Popup Layers

Change the color of the top layer to serve as the popup backdrop.

The background layer beneath it will now act as your overall background color.

Step 5: Resize the Popup Container

Adjust the top layer container to be:

  • 80% width

  • Max width: 800px

  • Optional: Add a border radius (e.g., 8px) for a softer look

Step 6: Center the Popup on Screen

Click the outermost container and set the layout to:

  • Horizontal

  • Align: center

  • Justify: center

    This will position your popup perfectly in the middle of the screen.

You should now see a clean popup window centered on your screen—not taking up the full viewport.

Step 8: Add In Images and the Close Button (X)

Select the main popup container and set its position to Relative.

This step ensures that any absolutely positioned elements (like the X button or image overlays) stay aligned within the container.

And that's it! You've successfully modified your pop-up to not be full screen.

Did this answer your question?