icon module css bug

Beaver Builder
1

I’ve found this snippet:

@media (max-width: 768px) {
.fl-module-icon {
text-align: center !important;
}

I’d love to control the icon alignment on mobile + tablet myself.

I guess this happens in other places too.

Is there a specific reason we can’t controll this?

See the result here: sellingsites.nl (I will get rid of your picture before deployment :wink: )

Cheers,
Bob

2

Hi Bob, I see what you mean there. Not sure if you want the technical explanation or not, but we use the !important tag so that we can target all of the .fl-module-icon elements at once. If you have 3 icons on a page, you can set the alignment on each on individually. In that media query, we use the important tag to override all of the individual alignment declarations.

That said, you can still change the icon alignment using CSS. You’ll just need to use the !important tag as well. Are you using the Beaver Builder theme? You can put this CSS snippet in the code section of the theme settings and it will override the default:

.fl-module-icon {
    text-align: left !important;
}

Let me know if that answers your question. Thanks again Bob!