Page Width on Mobile Devices - Genesis Parallax Pro

Beaver Builder
1

I am building a site at http://www.lesliebriese.com/ with a Genesis Parallax Pro theme. The home page displays just fine on a mobile device. I also have a page built with Beaver Builder at http://www.lesliebriese.com/29903-legends-chase-circle/ that looks great when displayed in horizontal mode on a mobile device, but only occupies about 80% of the width if I turn the phone vertically. Any ideas?

2

Hey Chuck,

Welcome to the BB forums! :slight_smile:

Sorry, I seem to be restricted from viewing the site. But I have a feeling what you’re experiencing is caused by the max-width we set on columns that are less than or equal to 50% in width. Try adding the CSS snippet below and see if it works.

.fl-col-small {	
  min-width: 100%;
}

If this is not the case, you may need to lift the restriction temporarily so we can check the site. :slight_smile:

Ben

3

[Content Hidden]

4

Hey Chuck,

No worries at all! And yes, I can see the site now. I am checking on an iPhone6, are you referring to the space on the right side of the content? That would be caused by the table that you have and the headings on your CTAs. The table is not responsive so it’s taking up space outside its container. The heading on your CTA is too big it goes outside its container as well.

We could hide the elements that go out of its container by setting overflow to hidden but it’s not really a good idea since those are part of your content.

You could hide the table on mobile devices under the Advanced tab, create another row that only appears on mobile devices, and replicate the contents of the table in such a way that it fits mobile devices. Or you could look for 3rd party table plugin which is responsive, there should be a lot on the wp.org repo. :slight_smile:

Re the CTA, we can reduce the font-size on mobile. First, place a class on the CTA module, e.g., mobile-cta-font. Then add the CSS snippet below.

@media (max-width: 767px) {
  .mobile-cta-font .fl-module-content .fl-cta-title {
    font-size: 45px;
  }
}

Let us know how it goes! :slight_smile:

Ben