Best Way To Achieve this layout with icons

Beaver Builder
1

This is a 2 part question…

First, I’m trying to achieve the layout in the first image, on my site. The issue is when using the callout module or the icon module, I have to move the text that is aligned next to the icon UP without moving the icon. I haven’t figured out the code to isolate the text in that scenario. Is this the best route to achieve the desired layout? If so, how do I actually move that text?

And secondly, how do I adjust the size of the background on a given icon without actually increasing the size of the icon itself? As you can see in the image I’m trying to emulate, the actual font icon is small, with a much larger surrounding circle background than mine. When I tried achieving this by increasing the padding, it made the icon off center within the background circle.

Thanks,
Seth

2

http://imgur.com/pZRPKSJ

this is the site i want to emulate

3

http://imgur.com/YIaIhf4

this is how it looks on my site (I only styled the fonts and text block position on the 2nd one so far so you can ignore that leftmost icon block)

4

Hey Seth,

That should both be doable with CSS. You’ll need to place an extra class on each Callout module you want this to apply, or maybe on the row where the modules are placed. Then add the CSS snippet below replacing extra-class with your own.

/* Adjust the background of the icon on a Callout module */
.extra-class .fl-callout .fl-icon i {
  height: 40px; /* All values should be equal to get a perfect circle */
  line-height: 40px;
  width: 40px;
}
/* Move the content upwards on a Callout module */
.extra-class .fl-callout .fl-callout-content {
  position: relative;
  top: -10px;
}

Let us know how it goes! :slight_smile:

Ben