Row with background image not staying 100% height on responsive

Beaver Builder
1

I’m attempting to get this to respond correctly for mobile. I have an image as a background with 2 columns in that row, the right column has text editor with text I have set to only display on large and then a row to only display on medium and small. The problem I’m having is with the background image not staying visible full height when in medium and small. I tried adding a class to the left column and telling it to be forced 100% height and also tried making it displayed on all resolutions. You can see my staging site here:

http://evfreefullerto.staging.wpengine.com/visit/staff/billy-tarka/

2

Hey Jason,

Would you mind shooting me temp admin access? Bit hard to troubleshoot on this one without getting under the hood!

Best,
Billy

3

[Content Hidden]

4

Hey Jason,

This is an interesting one. Where is the custom CSS that you are calling in BB? I see the class, but not where the CSS is located. I believe this could work without CSS, but alas, I am knee deep in a few client sites today and just don’t have time to mess around with it more. I or Ben will have time tomorrow if that’s ok with you.

Best,
Billy

5

It’s in the style.css in the “savior” theme folder’s root. The code i have is:

.height-100{

display: block;
min-height: 100%;
max-height: 100%;
height: 100%;

}

Which does nothing really.

6

It looks like I resolved the issue, I ended up having my css in the ID instead of the Class. Woops, rookie mistake :slight_smile:

7

Aha! I should have tried that. I saw it, but since I was looking at trying to do it with standard BB controls, I didn’t think about it! Anyway, great to hear! :slight_smile: