Sizing popup pages to the browser width vs fixed value

Liberty Create
1

I wanted some popup pages to use the space the user’s browser actually has, not a fixed pixel width. Many of our users have lower-resolution monitors and don’t have 1600px of screen width, but I still wanted the popup to be as wide as their screen allows.

You can do this with a custom page class and a few lines of CSS:

  1. On the popup page, go to Page > Basics > Advanced and set the Custom page class to wide-popup. Liberty Create adds the page- prefix, so the class on the page becomes .page-wide-popup.
  2. Add the CSS below to the bottom of the late stylesheet for the Theme you want this popup setup in:

css

.modal-dialog:has(.page-wide-popup) {
    width: 95vw !important;
    max-width: 95vw !important;
}

The popup will now take up 95% of the browser width, whatever size the screen is. I’ve only set the width, but you could set the height in the same way.

I like this solution, so I thought I’d share it.

Regards,
JonathanFS (EHDC)

2

Worth submitting a nid to ask for the popup size boxes to support vw/vh as the unit?