Resolving the ‘View in Full Screen’ overlay

Seeing a “View in Full Screen” button where you expect an inline PDF viewer? This overlay appears when the embed area is narrower than the set mobile width. The plugin treats narrow columns as unsuitable for inline interaction and shows the full-screen button instead, so visitors can open the PDF in a focused view.

This guide covers how to disable the overlay, adjust when it triggers, and restyle it to fit your site’s design.

---

Why the Overlay Appears

When a PDF is embedded in a column, sidebar, or any container narrower than the configured Mobile Width value (default: 500 pixels), PDF Embedder replaces the inline viewer with a thumbnail and a large “View in Full Screen” button. This behaviour exists because interacting with a small embedded viewer on touch devices is difficult.

The 500-pixel threshold applies in any browser, not just on mobile. If your layout places the PDF in a narrow column on desktop, the overlay will appear there too.

Hiding the Overlay

To disable the “View in Full Screen” overlay entirely, head to the PDF Embedder mobile settings and set Mobile Width to 0, then click Save Changes.

With Mobile Width set to 0, the inline viewer always displays by default, regardless of screen width. The full-screen icon in the toolbar remains available, so visitors can still choose to open in full screen if they want to.

To disable the overlay on specific embeds only, without changing the global setting, add mobilewidth="0" to the shortcode:

[pdf-embedder url="https://example.com/wp-content/uploads/document.pdf" mobilewidth="0"]Code language: JSON / JSON with Comments (json)

Controlling When the Overlay Appears

If you want to keep the overlay for narrow mobile views but stop it from triggering on wider screens, adjust the Mobile Width threshold. The default is 500 pixels. A value between 250 and 320 limits the overlay to small phone screens only.

Head to PDF Embedder mobile settings and enter the width in pixels. The overlay appears only when the embed area drops below this value.

Styling the Overlay

The overlay’s appearance can be changed with CSS. Add the following custom CSS to your site and adjust the values to match your site’s design:

/* Change the overlay background colour */
div.pdfemb-inner-div-wantmobile {
    background-color: lightgray !important;
    opacity: 0.5;
}

/* Change the button style */
div.pdfemb-wantmobile-fsarea {
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
    border: 2px solid #363600 !important;
    background-color: #C5BDCF !important;
    -webkit-box-shadow: #B3B3B3 8px 8px 8px !important;
    -moz-box-shadow: #B3B3B3 8px 8px 8px !important;
    box-shadow: #B3B3B3 8px 8px 8px !important;
    color: black !important;
    font-family: sans-serif !important;
    letter-spacing: 2px !important;
    font-size: 16px !important;
    display: flex;
    justify-content: center;
    align-items: center;
}Code language: CSS (css)

The values shown are the plugin’s defaults. The !important flag is required to override the plugin’s built-in styles.

Here’s a detailed tutorial on how to add custom CSS like this to your site: https://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/. 

We recommend using the WPCode plugin to protect your code from updates and keep it easy to manage right within your WordPress admin area.

Frequently Asked Questions

Below, we’ve addressed some common questions about the full-screen overlay.