Having issues with line break in :after pseudo element on x theme

[whistlermedia]

I’m adding a CSS built sticky CTA bar on a new site, kind of overriding the colophon-bottom styling. On another site, using another theme, I was able to successfully add a line-break on mobile devices (not desktop) after an icon using the follow:

.x-icon.proposal:after {
content:"\a FAST";
color:#fff;
white-space:pre;
font-size:8px;
font-family:arial;
font-weight:700;
}

This gives me

on a site not using X theme.

This same code, with different “content” gives me

Why would this be happening? I literally copied and pasted this code from one site to the next.

Site with the functioning element: coopermisnerortho.com
Site with non-functioning element: whistlerbillboards.com

Please advise.

[ruenel]

Hello @whistlermedia,

Thanks for writing in!

On the X theme, all the icons will display as inline-flex while the example site that is not using the X theme displays the icons as inline-block. You will need to override the icon styling on the X theme so that you will have something like this:

The flex-flow value of the .x-icon styling on the right was changed from row to column.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[whistlermedia]

Thank you so much. I had to use inline-block instead of flex. When I did, it added a giant line space in-between both the icon and each of the words, so I made the text smaller and I guess keep it on a single line. Not sure what was adding the large space in-between the icons and text, but I’ll work with this for now if I have to.

Again, thank you for some guidance.

[ruenel]

You are most welcome, @whistlermedia!