Multiple issues - section height, icon background, callout heading, IE probs

Beaver Builder
1

Hi Guys,

First BB project so apologies for all the questions but have several issues to address.

I have a live version of test site and an admin account for you (modify as required).

Some of these issues seem buggy but have made a couple of child theme css mods - would greatly appreciate guidance / fixes.

Thanks, M

General Issues:

First section - full height section does not account for header height and extends below viewport as a result.

Third Section (solutions): The imported Entypo icon in the first box is rendering with a double overlapping background - the native fonawsome icons do not have this problem.

Fifth Section: Callout modules in right column. When using callout on dark background I can set the icon and text colours in Callout Settings / Style but here seems to be no style option for Heading colour. How can I change the heading colour in a user friendly way (ie without having to add a specific class to each callout module).

Button transparency: Have selected Transparent as the button style but seems to be ignored as coloured background button rendering.

IE Issues (IE 11.0.9600.17937 on Win 8.1):

Page width: This is a theme issue. I want to increase the width of the of the content area and the header / footer. The following child theme css works in FF:

.fl-full-width .container {
width: 1240px;
}
.fl-row-fixed-width {
max-width: 1240px;
}

but fails on IE with a horizontal scroll bar appearing.

The right aligned Heading on the full height first section also disappears off canvas.

The final section (before footer widgets) has extended white space below it.

2

[Content Hidden]

3

Hey Mark,

No worries at all! Answers to your questions below. :slight_smile:

  1. The main reason we implemented the full height row option was for landing pages. We do have that on our radar though, to include an option to take into account the header of the page, but we don't have a concrete timeline as to when that will be implemented.
  2. It looks like the icons have a weird left/right margin that's causing the issue. The CSS snippet below should get rid of it, but you'll need to add the class fl-entypo to all icons using the same font, or remove the styling from the font's stylesheet. ``` .fl-entypo i:before { margin-left: 0; margin-right: 0; } ```
  3. Sorry to say but there is no such setting for that yet. You're gonna have to go with custom CSS for now. Feel free to add that as a feature request though on our User Voice. :)
  4. For the transparency style to take effect, you'll need to assign a background color to the button first.
  5. This is caused by the bug on the next bullet.
  6. A bug from our full height feature. I've already filed a bug report. Thanks for the heads up! :)
  7. This is actually an issue with IE which they haven't resolved yet. Basically, the browser is having issues resizing the image when the equal heights feature is enabled. The original height of the image is still being followed by the wrapper and that is causing the extra space. That should be fixed if you use the exact image dimensions the image appears in the browser, which is 323x323px. Check this link for more info on the IE issue.

Ben

4

Hey Ben,

Many thanks for wading through this. Baseline thoughts:

  1. Fundamental design requirement for contemporary sites really - all other content builder based themes / plugins I’m familiar with have this covered out of the box. Well worth sorting without delay.

  2. You have a great icon import feature (one of the reasons I migrated) - imho you need to address this at a framework level as I certainly can’t rely on non technical editors to apply a class whenever the choose an Entypo font.

  3. Pretty obvious requirement though.

  4. Hmm - tricky - consider an environment where this counter-intuitive message has to be communicated to say 30 non technical editors.

  5. OK - the workaround I guess is no right aligned headings in full height row - hope this makes it to the next update, pretty fundamental.

Cheers, Mark

5

Ben,

Back to 5. as this is possibly the elephant in the room.

Are you saying that if I have a full height row on a page I cannot change the site page width without initiating a bug that screws the layout in IE? Hoping I’ve mis-understood.

Thanks, Mark

6

Hey Ben - just went through this again - apologies if my response comes over as a bit curt - unintended just in firefighting mode at end of a very long week!

7

Hi Ben,

Just seeking clarification on issues 5 & 6 as matter of priority please as I’m not going to be able to proceed with BB on current project if there is an unresolved IE bug preventing the use of full height sections and custom page widths.

  1. also a concern and unclear whether you are saying this is a BB bug that will be resolved or an IE bug which won’t.

Many Thanks, Mark

8

Hey Mark,

For #1, we already have a feature request for it so if you’ve a minute, feel free to vote for it on the link below.
https://wpbeaverbuilder.uservoice.com/forums/270594-general/suggestions/10223934-full-row-heights-with-offset-for-static-header

For #2, can you share how you got the fonts and how you uploaded them? I’d like to try it on my end before filing a bug/enhancement report.

For #4, on the latest version of the plugin, the layout options, flat, transparent, gradient, no longer appear if you don’t select a background option.

For #5 and #6, I’ve already filed a bug report for this. We’re currently swamped at the moment but rest assured it will be looked at the soonest.

For #7, this is an IE bug and happens every time an element is set to flex, to achieve the equal heights feature. The current workaround is to use an image with the exact dimensions as it appears on the page, so the browser doesn’t have to resize it.

Ben

9

Hi Ben,

Going to move the big issue to the top as the others all insignificant by comparison:

5 & 6. A bug that breaks IE under normal usage scenario - big issue at this end. Appreciate currently swamped but could you let me know if you do not think this is going to be fixed in the next 7 - 10 days? Can’t launch with an IE bug like this so will need to change track.

  1. Sadly languishing in suggestions since last summer. I’m going to need a workaround for this (e.g. specify header height and negative margin content). And I’m running out of votes :wink:

  2. Followed BB instructions - selected and downloaded the Entypo set from Fontello and uploaded to Page Builder Settings. So should work but buggy. I kludged using:

.fl-icon i:before {
margin-left: 0;
margin-right: 0;
}

which so far fixes this and doesn’t seem to affect other icons.

  1. OK - I need to get my head around your approach to button styling as I will need to create my own styles for all of these options.

  2. But how does this work responsively? Fine I can set dimensions that work on desktop but what about smaller screens - isn’t a fixed pixel image going to break mobile layouts?

Many thanks, Mark

10

Hi Mark,

The IE bug was fixed today and will be rolled out in a minor update this week. Thanks for bringing that to our attention.

Regarding full height rows accounting for the header, that’s a bit tricky as header heights can vary, so a clean solution that isn’t hacked together with JavaScript has been eluding us. In the meantime, you can use this CSS below to achieve that effect…

#my-row-id.fl-row-full-height .fl-row-content-wrap {
	min-height: 100vh;
	min-height: -webkit-calc(100vh - 100px);
	min-height: -moz-calc(100vh - 100px);
	min-height: calc(100vh - 100px);
}

You’ll need to change my-row-id to the ID you set for your row and change all of the occurrences of 100px to the height of your header.

Let me know if you have any questions about that.

Justin

11

> The IE bug was fixed today and will be rolled out in a minor update this week. Thanks for bringing that to our attention.

Great news, thanks Justin. I’m back on track :slight_smile:

Will have a play with the header.

12

Hi - just a note that the fix to the IE width issue bug seems to have caused another:

Elements positioned in a full screen section ignore their horizontal alignment settings and are centered in IE.

For example, a heading element with Alignment set to “right” displays as it should in FF but is center aligned in IE (regardless of its alignment setting).

13

Hi Mark,

Thanks for the heads up on this. I’ll have a look this week.

Justin

14

I think the prob related to the container - width seems to be behaving auto on IE rather than 100%.