How to fix height of callout boxes

Hey guys,

I have 3 callout boxes on my homepage with different header and text info (no image/icon/button), the boxes each have a different backgound colour added in the column settings. I have added various bottom margins to make them all equal in height, however when viewing across different browsers the height adjusts and they become uneven in height. Is there a way using css to fix the height as an absolute indentical height for all 3?

Many thanks

Kat

Hey Kat,

Do you mind sharing the URL of the site so we can check? I might be able to provide a quick fix for you via CSS. :slight_smile:

Ben

Sure, here it is:

https://digitalclimb.co.uk

Also another related callout question, I have used a negative margin to overlap the callout boxes onto the top row, this has various px overlap effect across browsers - do you know if there is a better way without using the negative margin?

big thanks

Kat

Hey Kat,

Try using this CSS snippet and see if it works for you!

#process-row .fl-col-group {
  display: flex;
}
#process-row .fl-col-group .fl-col {
  display: flex;
}

Re negative margins, I’ve seen a lot of sites using that to achieve the same layout. In fact, I’ve never seen any other method to do so. Do you mind sharing a screenshot of what’s happening? I see the page just fine from my end.

Ben

Thanks Ben it did work although I had another process-row on a different page with headers and buttons and it left aligned them, I’ve changed the name of it so all ok, I read an earlier thread that mentioned you may be implementing fixed heights into some of the modules soon, is this right?

I’m working on a laptop at the moment that’s running windows 10 and I think Firefox has a problem with zoom in 10, it’s really zoomed so the content area on pages looks too large. Here’s the screen shot links in dropbox, having the same result in IE and the new Edge browser on the overlap.

https://www.dropbox.com/s/ja8xmw5fh49gpds/chrome%20screenshot.jpg?dl=0
https://www.dropbox.com/s/jm8lxrz89uu0f9h/explorer-screenshot.jpg?dl=0
https://www.dropbox.com/s/uy0m5z6x4sjra4p/firefox-win10-screenshot.jpg?dl=0

Just out of interest are you testing the new Edge browser as the callout boxes have disappeared completely after the CSS changes through the customiser, I will try adding to the child theme css instead. Not sure whether to take the Edge browser seriously yet, it’s so new!!

Many thanks Kat

Hi Ben

Further to this I’ve had to comment out the css for now as it didnt work on mobiles, I’ll need to work further on the media queries. To have fixed height in the builder would be very welcome from me :slight_smile:

Cheers, Kat

Hi Ben - I have resolved the above responsive comment above by creating a duplicate row with no class assigned and changed the display to small and medium devices only, then changed the display on the fixed height row to large devices only - brilliantly simple thanks to beaver builder and a good way to avoid media queries, so I am happy.

Kat

Hey Kat,

Sorry, I meant to add to my reply the addition of media queries. Also, one suggestion to your site. Currently, you are adding 300px margins to the left and right side of the callout modules. Why not set this row to fixed width instead? I think that’s where your mobile issue was stemming from. :slight_smile:

We already have the fixed heights and all the other new stuff ready which we will release in beta by Monday hopefully. In fact, that’s where I got the CSS above from. :slight_smile:

Ben

Thanks Ben I’ll be one of the first to test!

I know I make things more difficult sometimes!! But originally I did have the fixed width and it looked great/worked well, so I wanted to test if widths were customisable using a left/right margin as I have had a specific width request from a client - and beaver builder can deliver :slight_smile:

Hey Kat,

You can actually customize the width of a fixed-width row under Global Settings > Max Width. :slight_smile:

Ben

Thanks Ben that will help with my next project.

I know this thread is marked as resolved, but I have noticed that my callout boxes disappear in the new Edge browser when the custom css code is applied to the process row and was wondering if you are testing in Edge yet for the next beta release?

Hey Kat,

I just tried our beta version on the Edge browser and it works just fine there. You may just want to skip using the CSS above and just wait for the beta to be released hopefully on Monday? :wink:

Ben