Maybe you notice that the Close Button of your Popup is displayed rather far outside your Popup. Usually, you’ll also see a drop shadow with a big gap to the Popup, as displayed in the screenshot below.
Why does it happen?
The plugin always adds the close button and the drop shadow to the section and not to the row.
When you see this, you have applied styling to the row or even a single module inside your Popup, and your Section uses a transparent background color. Inside the Visual Builder, your Popup will look similar to this:
How to fix it?
Option 1: Move the styles from the Row to the Section
This is the cleanest and most flexible solution. It will work even when you add a new Row to the Popup, and it gives you the most control over the appearance.
Apply all the styles from your Row to the Section and remove the styles from the Row.
- Edit the Row. Use the Filter “Modified Styles” to find all relevant changes.
- Manually transfer each relevant style to the Section.
- Reset the Row styles after transferring them to the section.
Relevant styles are usually the background color, border settings, as well as sizing and spacing details.
Before (wrong):
After applying the change. Note how the section (blue) has a background color and border, while the row (green) does not have any styles anymore:
Option 2: Remove the gap between the Section and the Row
_This is a lot faster but less flexible: You will have problems when adding a new Row to the Popup._
- Edit the Section settings. In Design > Spacing set all Paddings to “0px”.
- Edit the Row settings. In Design > Sizing set Width and Max Width to “100%”.
Before (wrong):
After applying the change. Note that there is no gap between the row (green) and the section (blue):
