Icon transform issue?

First off… Thank you for the great toolset. I have used transform rotate 10degrees on a page. It works fine when the text is aligned center but the icon flies away by about 100pixels upwards. Is there a way to limit this behaviour. Please see the first 3 H2 elements (aligned left) and the normal working 4th element on this page About – Dean Hill Development
Regards

Hi ErolK,

The issue is because the .gb-icon is going full width of the container (the Headline wrapper element). When you rotate, the pivot point is not on the center of the icon but on the center of the headline element wrapper.

Try setting this on the Headline block that contains the icon.
Shared with CloudApp

Thank you Elvin. But it did not work. I have used global style on this occasion and thought maybe that is why it behaves like this. But tested this on one of the H2 elements without using Global style and there is no change. I like it as it is so did my client but there is a bug in there. I have tried it on another site with nothing but GB on the page and it is the same. When icon is inline there is no problem when the icon is above then it flies :slight_smile:

Sorry for the very late reply. This one got buried.

Have you sorted this out?

For transform rotate, the issue is because it’s the entire element that’s being rotated.

If you specifically want to rotate only the icon, it may be best to have it on a separate block w/ no tests beside it so the icon is the center of the pivot point for the rotation.

Thanks Elvin but like I have mentioned on my previous reply I like the way it flies anyway hence there is no need to apologise for late reply at all. I have been with GP since 2016 and I know you guys are great in solving problems and replying to questions :slight_smile: