I see the ‘View in Full Screen’ overlay when I don’t want it

Hiding the Overlay

You see the ‘View in Full Screen’ message when the PDF is embedded in too narrow a column. This is designed so that on mobile devices, the user always has to open in full screen rather than trying to grapple with the inline PDF viewer which is difficult to use in a small screen.

You can remove this feature by going to Settings -> PDF Embedder, and clicking on the Mobile tab.

Set the ‘Mobile Width’ to 0. This should always display the viewer inline by default, without the ‘View in Full Screen’ overlay, and then the user can still click the full screen icon in the toolbar to open in full screen only if they want.

If you still want the overlay to appear for mobile users then use a non-zero (i.e. somewhere in the range of 250 – 320) number in the ‘Mobile Width’ setting.

Styling the Overlay

It is also possible to change the styling of the overlay and button using a bit of CSS added to your child theme’s styles.css file or the Appearance » Customize » Additional CSS field (note that the values are the default and the !important attribute is needed for certain elements to override the plugin’s default values):

/* CHANGE COLOUR OF FS OVERLAY */
div.pdfemb-inner-div-wantmobile {
    background-color: lightgray !important;
    opacity: 0.5;
}

/* CHANGE STYLE OF VIEW IN FS BTN */
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)