Change size of the close button

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;
}

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?