formatting for call outs

Beaver Builder
1

Hi Gents

Trust you are doing well.

I have a small formatting issue especial relating to mobile.

The site is hiyer.org
The problem is on the home page (basically one pager) section “the cool factor”
On the large screen I use the following configuration Callout1 - text - call out2
And it works like a dream.

On the mobile it is basically text - callout1 - callout 2.
On the screen they are not next to each other but below each other. That works like a dream.
In both cases I use a call out with the text to the left for callout1 and text to the right for callout2.

Now for the nightmare bit. On the small screens the “text is top image bottom” or “image top text bottom” for the two callouts respectively. How do get the mobile screens to keep the text and image in a line as it does on a big viewport?

2

Hey Herman,

You’re right, there seems to be no way to control the alignment shift on mobile view on the module. As a workaround, try using this CSS code below and see if that fixes it up.

#cfcs .fl-callout-content {
    display: table-cell;
    width: 252px;
}

#cfcs .fl-callout-photo {
    display: table-cell;
    margin-top: 25px;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

I can see that you already added the ID cfcs for the entire section so I used that to target these modules specifically.

Jun

3

Jun You rock! That did the trick! I really appreciate you guys, awesome product and awesome support team!

4

Hey Herman,

Glad to hear it worked and thanks for the kind words. We appreciate it! :slight_smile:

Jun