BugWP logo BugWP
Back to Community
Home / Community / General

How to Fix Popup Positioning and Display Issues in WordPress

17 threads Sep 9, 2025

Content

Popup Maker is a powerful tool for creating engaging popups, but sometimes getting them to display exactly where you want can be tricky. A common challenge users face is popups that appear in the wrong location, shift during animation, or don't respond correctly to different screen sizes. This guide will walk you through the most common positioning and display problems and how to resolve them.

Common Popup Positioning Issues

Based on community reports, the most frequent problems include:

  • Popups shifting to the left or right on wider screens.
  • Content not centering correctly within the popup container.
  • Mobile browser UI (like the bottom tap bar) interfering with popup placement.
  • Annoying visual jumps or layout shifts during the popup's entrance animation.
  • Difficulty positioning a popup relative to a specific page element.

Why Do These Issues Happen?

These display glitches usually occur for a few key reasons:

  1. Conflicting CSS: Other plugins or your theme's stylesheet can override Popup Maker's styling rules. For example, a rule from another plugin might force all images to align left, affecting images inside your popups.
  2. Viewport Calculations: The plugin calculates position based on the browser's viewport. Mobile browsers with dynamic UI elements (like a disappearing address bar) can cause these calculations to be slightly off.
  3. Animation Sequencing: Entrance animations can sometimes cause a brief visual glitch where the popup appears in its default position before snapping to its final, configured position.
  4. Size Settings: Using percentage-based widths without maximum or minimum size limits can lead to popups behaving unexpectedly on very large or very small screens.

Step-by-Step Troubleshooting Guide

1. Check the Built-in Display and Position Settings First

Before adding custom code, always explore the plugin's built-in options. Navigate to your popup's settings and review the Display tab.

  • Display Presets: Start with a preset like "Center Popup" or "Right Bottom Slide-in" that closely matches your goal.
  • Position & Location: Use the sliders to fine-tune the popup's placement from the top, bottom, left, or right of the screen.
  • Size: For responsive control, set a width (e.g., 80%) and also define a Max Width (e.g., 900px) to prevent it from becoming too large on big monitors.

2. Fixing Mobile-Specific Placement (e.g., Bottom Gap)

If your popup isn't accounting for a mobile browser's bottom navigation bar, try this CSS fix. First, in your popup's Display settings, disable the Fixed Position option. Then, add the following CSS to your site (via Appearance > Customize > Additional CSS or a custom CSS plugin). Remember to change the popup ID (123) to match your actual popup's ID.

#pum-123 .pum-container {     
    top: auto !important;    
    bottom: 0px !important;     
    margin: 0 !important;     
    position: fixed !important; 
}

3. Resolving Animation Jitters and Layout Shifts

If your popup appears to jump or shift when opening, it's often due to the initial animation state. Ensuring your popup's theme has a background color set can sometimes help mask this. For more precise control, you may need to adjust the CSS animation properties for that specific popup.

4. Overriding Conflicting Styles

If you suspect another plugin or your theme is causing styling issues, you will need to use more specific CSS to override it. Use your browser's inspector tool (right-click on the popup and select "Inspect") to identify the conflicting style rule. Then, craft a CSS rule that is more specific and includes !important if necessary.

5. Positioning Relative to a Trigger Element

To position a popup near a specific button or image (its trigger), use the Position From Trigger setting. This tells the popup to calculate its position based on the trigger element's location on the page rather than the overall browser viewport.

When to Seek Further Help

If these steps don't resolve your issue, the problem might be highly specific to your site's configuration. To get effective help from the community or official channels, be prepared to provide:

  • A direct link to the page where the popup is located.
  • Clear screenshots or a screen recording of the problematic behavior.
  • The exact steps to replicate the issue.

By methodically working through these common causes and solutions, you can gain precise control over your popups' appearance and behavior on any device.

Related Support Threads Support