Trouble viewing on mobile devices

Beaver Builder
1

Hey Ben,

we are finally live with the website:
www.biocaregreen.de

Would you please have you look at the side ?!
On desktop / computer / browser so far everything looks good.

But on the mobile devices, e.g. ipad, iphone, is always represented a fairly wide strip on the right margin, but he shall not be there.

Do you know what may be there?

Thanks for a prompt reply.

kind regards
Tom

2

Hey Tom,

For mobile, the issue caused by how large the heading Unsere Philosophie is. There should be an option for our Heading module to change the font-size on mobile. I’m really stumped as to what’s causing that extra space on tablets though. Do you mind sharing temp admin access to I can check?

Ben

3

[Content Hidden]

4

[Content Hidden]

5

Hey Tom,

I just figured out that this problem is caused by our Menu module, the one on your footer. It’s placing the submenus to the right side which is taking space. I’ll have to file a bug report so our lead dev can check but it might take time as we’re currently swamped right now. If it’s fine with you, you can transfer the menu to the left side instead. Sorry for the inconvenience caused.

Ben

6

[Content Hidden]

7

[Content Hidden]

8

Hey Tom,

Regarding the mobile view, it is caused by how big your fonts are for your headings. You can adjust the mobile font-size for the Heading module under Style > Mobile Structure. Reduce it on mobile so it doesn’t take space outside the container.

Having a fixed menu doesn’t really work well on mobile, I should have updated the KB article I pointed you to. Change this:

.fl page-header-primary {
  position: fixed;
  z-index: 999;
  width: 100%;
}
.fl page-content {
  padding-top: 68px; / * Change to whatever the height of your header is * /
}

to this:

@media (min-width: 768px) {
  .fl-page-header-primary {
    position: fixed;
    z-index: 999;
    width: 100%;
  }
  .fl-page-content {
    padding-top: 68px; /*Change to whatever the height of your header is*/
  }
}

Ben

9

[Content Hidden]

10

Hey Tom,

That’s a setting for our Heading module. The module you’re using for the heading Unsere Philosophie.

Ben

11

[Content Hidden]

12

[Content Hidden]

13

Hey Tom,

I’m seeing the mobile menu is now fixed. If you aren’t using our Heading module, what module are you using for these texts? AN DEN FRÜCHTEN, WERDEN SIE UNS ERKENNEN., Unsere Philosophie, and Unser Bestseller

Ben

14

[Content Hidden]

15

Hey Tom,

The heading Unsere Philosophie is still pretty big on mobile. If you check the screenshot below, you’ll notice it goes beyond the white BG/container and is causing the extra space on the right side.
http://imgur.com/m9gOmUJ

The arrows are present on mobile, check screenshot for reference.
http://imgur.com/wLySpSF

For you to add additional styling on your menu, check the link below.
http://forum.wpbeaverbuilder.com/knowledge-base/buttons-in-navigation-menu/

Ben