v1.0.19 — popup border + radius settings

New: popup-level border + radius settings under Behavior.

Why

A border set on a Divi Image module wasn't rendering in the popup when Imagify is also active. Imagify wraps every `` in a `` element and moves the `wp-image-XXX` class from the img to the picture. Combined with Fullwidth Image modules where Divi puts the border on the module wrapper (which is often wider than the visible image because the v1.0.16 image rules use `width: auto` for aspect-preservation), Divi-side borders land in the wrong place or miss the rendered element entirely.

Rather than try to handle every combination of Divi version × Imagify markup × module type, v1.0.19 adds plugin-level border settings that target the popup container directly. Reliable, predictable, no specificity battles.

What's new

Field	Type	Default	Examples
Popup border	CSS `border` shorthand	empty	`5px solid #ffffff`, `2px dashed #c10f30`, `10px solid rgba(255,255,255,0.5)`
Popup border radius (px)	int	0	`0` square, `12` rounded card, `50` very rounded, `500` pill

When border-radius is > 0, the container also gets `overflow: hidden` so the image clips to the rounded corners. No scrollbar regression because image fitting is already handled by `max-width`/`max-height` on the image itself.

How

Display class emits an inline `<style id="aqm-popup-inline-style">` block targeting `#aqm-popup-container` (specificity 1,0,0) so the rule reliably beats class-based defaults. CSS values pass through the same conservative sanitizer that strips characters which could break out of the inline style context.

v1.0.18 — close icon styling settings

Style the close icon from the admin — no Custom CSS required.

New Close icon section in the AQM Popup settings:

Field	Default	Notes
Button size (px)	36	Icon auto-scales to half the button size
Distance from corner (px)	10	Top + right offset from the popup's top-right
Background	`transparent`	Any CSS color — `transparent`, `rgba(0,0,0,0.55)`, `#ffffff`, `red`, etc.
Icon color	`#ffffff`	Any CSS color
Border radius (px)	0	Half the button size = circle. 0 = square.

Recipes

• Bare X with drop-shadow halo (default): Background `transparent`, Border radius `0`
• Translucent dark circle (the look from v1.0.0–v1.0.9): Background `rgba(0,0,0,0.55)`, Border radius `18` (half of size 36)
• Solid white square: Background `#ffffff`, Icon color `#000`, Border radius `4`
• Brand-colored circle: Background `#c10f30`, Icon color `#ffffff`, Border radius `18`

How it works under the hood

The display class emits an inline `<style id="aqm-popup-close-style">` block targeting `#aqm-popup-close` (specificity 1,0,0) so your values reliably beat the class-based defaults in the plugin's stylesheet. Color inputs are sanitized in the admin (`< > ; { } " ' \` stripped) so they can't break out of the inline style context. Empty/invalid values fall back to defaults — the popup never renders broken CSS.

v1.0.17 — Divi borders + box-shadows render in popup

Divi-side image decorations now render correctly in the popup.

What was happening

Plain CSS `border` (from Divi's Border panel) was already working — the plugin doesn't override `border` anywhere. But related decorations were silently clipped by `.aqm-popup-container { overflow: hidden }` (carried over from the v1.0.11 no-scrollbar work):

• `box-shadow` from Divi's Box Shadow panel
• `outline` (some modules use this for accent rings)
• Decorative `::before`/`::after` pseudo-elements that render outside their owner's box

What v1.0.17 does

Container switched to `overflow: visible`. Decorations now render beyond the container's box edge.

Image overflow is still prevented — v1.0.16's `max-width` + `max-height` constraints applied directly to `img`/`video` are unchanged, so the image still fits within the viewport (minus overlay padding). The overlay's own `overflow: hidden` catches anything that extends beyond the viewport edge, so the no-page-scrollbar guarantee is intact.

Niche side effect

If your popup content is a tall text block that exceeds the available height, the text will now overflow the container visibly rather than being clipped. For text-heavy popups, design content that fits the viewport, or restore the old behavior in Divi → Custom CSS:

```css
.aqm-popup-container { overflow: hidden; }
```

v1.0.16 — image fits viewport without clipping

Fix: the bottom of tall images no longer gets clipped by the popup container.

What was broken

After v1.0.15's overlay-padding ship, container's `max-height: 100%` fell back to the natural image height (CSS rule: percentage heights need a definite parent height). The container could grow taller than the overlay's content area, and `overflow: hidden` then clipped the bottom of the image.

How v1.0.16 fixes it

The display class now sets two CSS custom properties on the overlay's inline style:

```css
--aqm-popup-max-h: calc(100vh - 2 × verticalPadding);
--aqm-popup-max-w: calc(100vw - 2 × horizontalPadding);
```

These are viewport-relative values that don't depend on any parent having an explicit height. The container and the image both consume them:

```css
.aqm-popup-container {
max-width: var(--aqm-popup-max-w, 100vw);
max-height: var(--aqm-popup-max-h, 100vh);
}
#aqm-popup-content img,
#aqm-popup-content video {
max-width: 100%;
max-height: var(--aqm-popup-max-h, 100vh);
width: auto;
height: auto;
}
```

The image's `width: auto + height: auto` overrides Divi's `width: 100%` on Fullwidth Image modules, so the browser preserves the intrinsic aspect ratio when constraints apply. The image scales down to fit instead of stretching or clipping.

Trade-off (re-acknowledged from v1.0.11)

On viewports much wider than the image's natural size, the image now renders at its natural intrinsic size rather than stretching to fill the container width. This is the cost of aspect-preservation — the alternative is bottom-clipping when the image is tall.

If you'd rather stretch-fill (and accept clipping on small viewports), override in Divi → Custom CSS:

```css
#aqm-popup-content img { width: 100% !important; height: auto !important; }
```

v1.0.15 — padding insets popup from overlay edges

Fix: v1.0.14's padding was applied to the Divi section, which made the padded area show as the section's background color (often white) instead of the dark backdrop. Padding is now applied to the overlay itself, so the dark backdrop fills the padded area.

Setting renamed

`section_padding_` → `overlay_padding_`. Heads up: existing values reset to 0 on upgrade — re-enter them in Behavior if you had non-zero values set in v1.0.14.

What you get

• Overlay padding — top/bottom and left/right in Behavior section.
• Each value insets the popup from the corresponding viewport edge.
• The dark backdrop (controlled by Overlay opacity) fills the padded area.
• The close icon stays at the popup's outer corner (not floating in the backdrop area).
• Container `max-height` adapts to the overlay's content area, so the popup still fits within the viewport minus padding.

Picking values

Goal	Vertical	Horizontal
Popup fills viewport edge-to-edge	0	0
Small breathing room	20	20
Centered card with lots of backdrop visible	80	80
Banner-style top/bottom inset	60	0

v1.0.14 — plugin-level section padding

New setting: Section padding (top/bottom + left/right) under Behavior in the AQM Popup settings.

Why this exists

Divi's Fullwidth Sections have `padding: 0` locked in the theme's base CSS at specificity (0,2,0). Divi UI's own padding control on a Fullwidth Section generates per-section CSS at lower specificity (0,1,0), so the lock wins and the Divi UI padding setting is silently ignored. The `Section → Advanced → Custom CSS → Main Element` workaround with `!important` also fails because Divi has multiple internal locks for fullwidth section padding.

How v1.0.14 fixes it

When you set a value in the new Section padding fields, the plugin emits an inline `<style>` block targeting:

```css
#aqm-popup-content .et_pb_section {
padding: Vpx Hpx !important;
}
```

Specificity 1,1,0 + `!important` reliably beats Divi's fullwidth lock, and the padding is applied to the Divi section element itself — NOT the overlay or container. Your section's background, border, and box-shadow still cover the padded area.

Behavior matrix

Setting	Result
Both = 0 (default)	No `<style>` emitted; Divi UI controls section padding (works fine for Regular Sections, ignored for Fullwidth Sections)
Vertical = 60, Horizontal = 0	Section gets 60px top/bottom, 0 left/right
Vertical = 60, Horizontal = 40	Section gets 60px top/bottom, 40px left/right
Edge-to-edge mode ON + padding set here	Edge-to-edge zeros row/column/module spacing; this setting controls section padding

v1.0.13 — stop overriding Divi image sizing

Fix: Divi's image sizing now works inside the popup.

What was broken

v1.0.11 added these image rules to satisfy the no-scrollbar request:

```css
#aqm-popup-content img, picture, video {
max-width: 100%;
max-height: 100vh;
width: auto;
height: auto;
object-fit: contain;
}
```

The `width: auto` part overrode Divi's own `.et_pb_fullwidth_image img { width: 100% }` rule (because `#id`-scoped selectors outrank class selectors). Result: Fullwidth Image modules rendered at their natural intrinsic size (e.g. 958px for a 958×958 image) instead of filling the popup container.

When users with edge-to-edge popups built around a Fullwidth Image looked at the result, the image was visibly smaller than expected with the container's empty space around it — which read as "my Divi padding/styles aren't applying".

What v1.0.13 does

Reduced the image CSS to a single standard responsive guard:

```css
#aqm-popup-content img, video {
max-width: 100%;
}
```

Divi now controls everything about image sizing:

• Fullwidth Image modules → fill the container width (Divi's intended behavior)
• Regular Image modules → render at their configured Divi size
• Section padding / row padding / module margin → visibly affect the image's position because Divi can drive the layout naturally

Trade-off

The overlay and container still use `overflow: hidden` + `max-height: 100vh` (kept from v1.0.11's no-scrollbar request). So content taller than the viewport will clip at the bottom rather than show a scrollbar.

If you'd rather have scrolling back for a specific site, add to Divi → Theme Options → Custom CSS:

```css
.aqm-popup-overlay,
.aqm-popup-container {
overflow: auto;
}
```

v1.0.12 — hotfix: white border around image

Hotfix for v1.0.11.

v1.0.11's specificity drop (`:where()` to make Divi UI overrides win) lost the cascade battle against Divi's base `.et_pb_row.et_pb_equal_columns` rule (specificity 0,2,0). The row's default 80% width came back, putting ~10% of empty section on each side of edge-to-edge content — visible as a ~100px white border.

What changed

• Reverted to direct selectors (specificity 0,2,0) for row/column/module so they reliably beat Divi's compound base rules.
• Removed section padding from the edge-to-edge reset entirely. Section padding is now purely controlled by Divi UI (Section → Design → Spacing → Padding). Set it to 0 in Divi for a true edge-to-edge image, or any value (e.g., 40px) for a card-style popup with breathing room.
• Kept v1.0.11's no-scrollbar (`overflow: hidden`) + image/picture/video scaling rules — those weren't the problem.

Setting section padding now

Open your Divi Library layout → click the section → Design → Spacing → Padding:

• 0px all sides → edge-to-edge image flush against popup edges
• 40px all sides → padded card look with breathing room around the content
• Any mix → e.g., 60px top, 0px sides, 60px bottom for vertical breathing room with horizontal flush

Whatever you set in Divi UI applies — no specificity battle, the plugin doesn't touch section padding.

v1.0.11 — no scrollbars + Divi UI overrides win

Two fixes:

1. No scrollbars in the popup

`overflow-y: auto` on the overlay and container is gone — replaced with `overflow: hidden`. Images, `` elements, and `

Trade-off: text-heavy content that exceeds the viewport will clip rather than scroll. Design your popup content to fit the viewport.

2. Divi UI overrides now win in edge-to-edge mode

Edge-to-edge mode's CSS selectors are wrapped in `:where()`, which drops their specificity to `0,1,0` — tied with Divi's per-element generated CSS (e.g. `.et_pb_section_9 { padding-top: 50px }`). Divi prints per-element rules after our stylesheet, so anything set explicitly in Divi UI (Section → Design → Spacing → Padding, Row → Sizing → Custom Width, etc.) now wins over the plugin's reset.

Workflow: turn edge-to-edge mode on for a sensible flush default. Want some padding on your section? Open the section in Divi Builder → Design → Spacing → Padding → set it. Your value wins.

v1.0.10 — row width + close-icon background

Three connected fixes for edge-to-edge popups.

1. Image no longer has horizontal padding (edge-to-edge mode)

Divi rows default to width: 80% of the section, which left a ~10% strip of section-background showing on each side of edge-to-edge content. v1.0.9's reset only zeroed padding — width was untouched. v1.0.10 forces `.et_pb_row { width: 100%; max-width: 100% }` inside the popup when edge-to-edge mode is on.

2. Close icon background removed

The close button previously had a hard-coded `background: rgba(0,0,0,0.55)` (a dark circle). That's gone — the button is now transparent with just a white X. A `filter: drop-shadow` halo keeps it visible on both light and dark content, with no plugin-imposed background colors.

If you want a circle/square/branded close button back, override `.aqm-popup-close` in Divi → Custom CSS.

3. Close icon now overlaps the content's top-right corner

This was the side effect of fix #1. The container had no white space of its own — what looked like "the close icon is in the white area" was actually the close icon sitting at the top-right of the container, with the Divi section's white background bleeding out past the 80%-wide row. With the row at 100%, the section background no longer bleeds past the content, and the close icon visibly sits on top of the content's top-right corner.