Skip to main content

Troubleshooting: Why is my popup form oversized or showing a scrollbar?

Learn why your popup form might appear too large or with a scrollbar—and how to quickly fix the issue.

Updated this week

For popup forms only

If you have saved and published your pop-up signup form on your eCommerce site but find that it appears too large, forcing customers to use a scrollbar to view the entire form, this troubleshooting guide will help you fix it.

Troubleshooting step 1: Confirm the size of your background image and any image blocks

The size of your background image or any images within your form can impact the overall height of the pop-up. Ensure your background image is no wider than 500px, and other images in the form are no wider than 600px.

If your image blocks exceed these recommended sizes, you can resize them directly in the Marsello form editor.

1. Go to Customer experience > Online> Signup forms and select your popup form from the menu.

2. With the form open, double-click on the larger container block to first confirm the size of your background image.

Screenshot of the Marsello form editor showing a selected popup form. The editor highlights a large container block where users can double-click to check or resize the background image. Text explains that background images should be no wider than 500px, and other form images no wider than 600px to avoid affecting the popup’s height.

3. Click edit image.

A cursor hovers over the "Edit image" button in the Marsello form editor, indicating where users can click to resize or adjust the selected image within the popup form.

4. Select resize adjust the width of your background image and save.

The image editing panel is open in the Marsello form editor, with the "Resize" option selected. The width of the background image is being adjusted, and a "Save" button is visible to confirm the changes.

5. Click Next step and reconfirm your pop-up settings.

6. Set your pop-up live.

7. Open an incognito browser and open your store site, test to see if this has removed the scroll bar.

If you are still seeing the scroll bar and you have additional image blocks in your form, you will need to confirm their width by clicking into each individual image block and re-running steps 2-7.

Troubleshooting step 2: Reduce font size

A common cause of scrollbars on pop-up forms is the font size, which can increase the form’s height. To remove the scrollbar and make the form smaller, try reducing the font size.

  1. Check font size in text blocks

  • With the form open, double click on any text block where the font size could be reduced.

  • This will open a secondary editor where you will be able to adjust your font size and style

he Marsello form editor is open with a text block selected. A secondary editor panel is visible, allowing users to adjust font size and style. A note explains that large font sizes can cause scrollbars on popup forms and suggests reducing the font size to minimize form height.

2. Check font size for data collection fields:

  • With the form open, double click on the data collection field block where the font size could be reduced.

  • This will open a secondary editor where you will be able to adjust your font size and style under Content > Labels

The Marsello form editor displays a data collection field block being selected. A secondary editor panel is open, showing the font size and style settings under Content > Labels, where users can adjust the text appearance to help reduce form height and eliminate scrollbars.

3. Click Next step and reconfirm your popup settings.

4. Set your popup live.

5. Open an incongnito browser and open your store site, test to see if this has removed the scroll bar.

You may need to repeat these steps if the scrollbar is still visible. However, be mindful to keep the font size legible for your customers.

Troubleshooting step 3: Reduce container padding around content blocks

Reducing the padding around each content block can decrease the overall height and width of your popup form, which may eliminate the scrollbar.

1. With the form open, double-click on the main container block.

2. This will open a secondary editor where you can reduce the container padding for the form under Row properties > Container padding.

The Marsello form editor is open with the main container block selected. A secondary editor panel is displayed, showing the Row properties > Container padding section where users can reduce padding to decrease the popup form’s overall height and width, potentially removing the scrollbar.

3. By default, container padding is set to 20px. Reduce the container padding.

4. Click Next Step and review your popup settings.

5. Set your pop-up live.

6. Open your store site in an incognito browser to test whether the scrollbar has been removed.

If the scrollbar is still visible, you may need to repeat these steps or further adjust padding and font sizes.

Related Articles
Incentivize your Sign-up forms: Boost conversions with discounts or loyalty points
Create a pop-up sign-up form
Troubleshooting: Why do my campaigns look different in Outlook than Marsello?
Forms customization blocks
Signup forms common questions
Did this answer your question?