Why is the Close Button so far outside my Popup?

  1. Home
  2. Knowledge Base
  3. Documentation
  4. Troubleshooting
  5. Why is the Close Button so far outside my Popup?

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, then 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. Use the Filter “Modified Styles” on the Row to find all relevant changes and transfer them to the section.

Filter for “Modified Styles”
Result: Styled Section, unstyled Row

Option 2

Remove the gap between the Section and the Row

This is a lot faster, but less flexible: You will have problems when you add a new Row to the Popup.

Step 1: Edit the Section settings and set all Paddings to “0px” (in Design > Spacing”).
Step 2: Edit the Row settings and set Width and Max Width to “100%” (in Design > Sizing).

Step 1: Set the Section-Paddings to “0px”
Step 2: Set the Row Width to “100%”
Result: The Row has the same size as the Section

Was this article helpful?

Related Articles