Callout Module - Adjusting image position

Beaver Builder
1

I have a mixture of callout modules with the built-in standard icons, as well as others that have picture icons that I have uploaded on multiple rows. The challenge I am having is trying to align the moduless of icons with the modules of pictures.

My uploaded pictures are the same size as the icons and I have chosen the option to place icons and images to the left of the header text; so logically everything should align. However, it looks like the uploaded pictures create a container that is 113px wide, with a padding of 30px and pushes the header text and any text from the text editor to the right. It also pushes the call to action button to the right also causing any text in the call to action button to show up on multiple lines; so the alignment is all off.

With some tweaks to CSS I can easily adjust the padding, but for some reason I cannot adjust the size of the container (i.e 113px). Are there any overrides I can do to get everything to align properly?

2

Hi David,

Would you mind sending me a link to the page in question? Feel free to use private reply. It’s a bit tough to troubleshoot without taking a look and doing some web inspecting.

Best,
Billy

3

I wish I could. I’m building on a local host. I could send you some screenshots?

4

Hey David,

Gotcha. Sure, feel free to send me a few screenshots - billy[at]fastlinemedia.com. I’ll take a look to see if there is anything we can do there.

Best,
Billy

5

I’m having the same problem. How can I change the container width and how should the proper CSS code to remove padding look like?

6

Hey Maurice,

Are you also working locally or do you have a link we can take a look at? If locally, feel free to paste some screenshots here using Imgur.

Best,
Billy

7

@David
Would it be possible for you to share some screenshots of the issue, please. So we can take a closer.

@Maurice
Would it be possible for you to provide a link to the site question and also a screenshot of what you have at the moment and what you want to achieve.

Thanks,
Danny

8

Here you go:

http://screencast.com/t/JMeITjyR0bw

Those images are only 50x50, but they take up a wide space. I’d like to be able to fully control the padding around the image/container size so that I can bring the callout heading as close to the image as desired.

9

@Maurice

Can you provide a link to the site, please? So I can take a closer look for you.

Thanks,
Danny

10

[Content Hidden]

11

Hi Maurice,

Which page, is the Callout module located on, as I am unable to find it?

Thanks,
Danny

12

[Content Hidden]

13

Hi Maurice,

So what I would do is this.

  1. Add a custom class to that Callout module via the Advanced tab. This way you will not style all Callout modules. For example my-callout-list.

  2. When you have added your class name to the Classes field, save the changes.

  3. Then add the following CSS (be aware that this is using the class name I mentioned above. If you use a different be sure to update the snippet below).

.my-callout-list .fl-callout-photo {
    padding-right: 0;
    width: 35px;
}

The end-result is this:

Cloudup

Be you may want to have a play with the padding, until you get your desired layout.

Thanks,
Danny

14

Thank you, that worked.

How can I add some top padding to the callout heading or do something else to center it vertically with these custom icons?

15

Hi Mauice,

Would it be possible for you to create a concept image, please. So I can see exactly what you’re trying to achieve.

Thanks,
Danny

16

Sure, here it is:

http://screencast.com/t/bgWbbGB9v6k

17

Hi Maurice,

Can you try this and see if this gives the desired effect:

.logistics-1 .fl-callout-content {
    vertical-align: bottom;
}

If not, we can try increasing the padding.

Thanks,
Danny

18

This worked, thanks a lot!

However, there’s still some issues. On medium/small devices, the callout modules start breaking down:

http://screencast.com/t/UQnKv0VNX28u

The images are above the headings which doesn’t look good. Any ways to keep them in the same line no matter the screen resolution?

I’ve created 2 separate rows for large and then medium/small devices btw.

19

Hi Maurice,

Firstly, can you remove all the !important declarations from the code I gave you above. As I am not sure why they were included, I have removed them from my snippets above.

Once you have removed these declarations, add the following code and see if this resolves your issue.

@media (max-width: 768px) {
  .logistics-1 .fl-callout {
      display: inline-flex;
  }
}
@media (max-width: 768px) {
  .logistics-1 .fl-callout-content {
      padding-left: 15px;
  }
}

Thanks,
Danny

20

Perfect! Thanks.