Conversation
supportHello, How I can change the sise of the close button? I would like to meke it smaller the it is and circular. For the close button, If I saw correctly, there are only the option to resize the size of the icon (text) “X” or to upload my own icon. Thank you!
Hello @ciucaadrian11 , If you use an Icon as your close button, you can set the size by going into your Popup > Design > Close Button > Size. You can then use a few CSS to make it circular and have a background color: .fb-{fpf fb.id} .fb-close { border-radius: 50%; width: 40px; height: 40px; background: #ff0000; } If you use an image as your close button, you can use the following CSS to make it circular and even set a width: .fb-{fpf fb.id} .fb-close img { border-radius: 50%; width: 40px; } Regards, Stergos
Am incercat urmatoarea solutie pe care mi-ati recomandat-o: .fb-{fpf fb.id} .fb-close { border-radius: 50%; width: 40px; height: 40px; background: #ff0000; } and it is working, except for the icon which is not cetered in the circle. It is out of the circle. Thank you!
You can try the following: .fb-{fpf fb.id} .fb-close { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; width: 40px; height: 40px; background: #ff0000; } If the issue persists, please share a URL where your popup appears so I can take a look.
Hello, The icon is not aligned yet. Please access the link Webin – Creare Site Web, SEO & Marketing Digital , scroll down, and click on button “ALEGE PLANUL” located in the red price table. Thank you!
It looks like your theme is overriding the close button styling and does not allow the centering of the icon within the button. You can fix this by using the following CSS snippet: .fb-{fpf fb.id} .fb-close { display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; width: 40px; height: 40px; padding: 0 !important; border: none !important; background: red; line-height: 1 !important; } This reply was modified 3 years, 3 months ago by Stergos Zamagias .
It is working. Thank you very much.
Glad it’s working! 🙂 Could you please do us a BIG favor and give it a 5-star rating to help us spread the word and boost our motivation?
Done. Thank you!
I appreciate your review and support 🙂
Hello @ciucaadrian11 , If you use an Icon as your close button, you can set the size by going into your Popup > Design > Close Button > Size. You can then use a few CSS to make it circular and have a background color: .fb-{fpf fb.id} .fb-close { border-radius: 50%; width: 40px; height: 40px; background: #ff0000; } If you use an image as your close button, you can use the following CSS to make it circular and even set a width: .fb-{fpf fb.id} .fb-close img { border-radius: 50%; width: 40px; } Regards, Stergos
Am incercat urmatoarea solutie pe care mi-ati recomandat-o: .fb-{fpf fb.id} .fb-close { border-radius: 50%; width: 40px; height: 40px; background: #ff0000; } and it is working, except for the icon which is not cetered in the circle. It is out of the circle. Thank you!
You can try the following: .fb-{fpf fb.id} .fb-close { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; width: 40px; height: 40px; background: #ff0000; } If the issue persists, please share a URL where your popup appears so I can take a look.
Hello, The icon is not aligned yet. Please access the link Webin – Creare Site Web, SEO & Marketing Digital , scroll down, and click on button “ALEGE PLANUL” located in the red price table. Thank you!
It looks like your theme is overriding the close button styling and does not allow the centering of the icon within the button. You can fix this by using the following CSS snippet: .fb-{fpf fb.id} .fb-close { display: inline-flex !important; align-items: center; justify-content: center; border-radius: 50%; width: 40px; height: 40px; padding: 0 !important; border: none !important; background: red; line-height: 1 !important; } This reply was modified 3 years, 3 months ago by Stergos Zamagias .
It is working. Thank you very much.
Glad it’s working! 🙂 Could you please do us a BIG favor and give it a 5-star rating to help us spread the word and boost our motivation?
Done. Thank you!
I appreciate your review and support 🙂