Display Glitch on iOS Devices

Beaver Builder
1

Hi! I’m using the Beaver Builder Theme and Plugin.

Theme Version: 1.3.2 (Official Child Theme V 1.0 Activated)
Plugin Version: 1.6.4.1

Most of the site looks fine. I’m having issues with one specific page:
http://shizdizbooth.com/about/

On desktop it looks fine. When I bring it up on Safari for iOS 9.1 I get the following glitch:

iPhone 6:
http://i.imgur.com/utmGEN6.png

iPad Air:
http://i.imgur.com/lusATRS.jpg

On both devices the page isn’t filling the screen and there’s a gray bar on the right side.

Could you take a look at this and let me know what’s going on?

2

[Content Hidden]

3

Also… W3 Total Cache and Cloudflare caches, along with local cache on both devices have been flushed.

4

Hey Matthew,

Just letting you know that we’re checking this one out.

Thanks!

KC

5

Hey Matthew,

It looks like your Website requires some Custom CSS Snippets to fix those glitches. I’ve inserted them for you, and it should work properly now. Let me briefly explain what it does.

Fixes long title words that causes extra column on the first image.

.fl-module-content h1.fl-heading {
    word-wrap: break-word;
}

Fixes the footer widget images in responsive layouts.

.fl-page-footer-widgets-row .textwidget img {
   max-width:100%;
}

Let us know if you need anything further! :slight_smile:

Thanks!

KC

6

That did it. Thanks so much for your help! :slight_smile: