WPBakery popup icons bug

Hello, I have created a popup with html blocks. I’ve divided column into two 1/2 rows, since I want two clickable icons on the top (01 image). Icons should enlarge on hover (with transform: scale property). Adding custom css to icons affects whole container instead of just icons. Disabling unnecessary plugins changes nothing. I’ve added custom debug css to these icons, so I could see the affected area visually. border: solid 3px green; for the left call icon and border: solid 3px red;for the right mail icon. On desktop whole container is affected (02 image) and on mobile the same, execpt right one does not scale down (03 image). Solved first button being unclickable on mobile by adding z-index value (04 image with fix applied). Tried WPBakery buttons, Woodmart buttons, but the results from these are dissatisfying. How can I nicely scale icons on hover without affecting whole container?

Attachments:

You must be logged in to view attached files.

Hello,

Can you please share the WP admin login details and the custom HTML block URL which you have created so I will check and give you the possible solution,.

Best Regards.

I have provide details in private section.

I want to ask if there’s any updates to this problem?

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.custom-social-btn > div {
	transition: transform .3s;
}

.custom-social-btn > div:hover {
	transform: scale(1.1);
}

Best Regards

It works really well, thank you!

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts