Image overlay text during image selection

Hi @jesi707

I hope you’re well today!

In addition to making image bigger, you’d also need to make it’s parent container bigger and “move” labels by adding some margin to them. For example:

.forminator-radio-image,
.forminator-radio-image span {
  width:100px!important;
  height:100px!important;
}

.forminator-radio-label {
  margin-top:20px;
}

If you are already using some custom CSS to style these radio fields, you may need to modify it based on above example.

As for centering everything:

.forminator-field-radio > * {
  text-align:center;
}

Best regards,
Adam

Hi, thanks for fast reply.

Your solution causes some other problems

1. image is bigger and text is not overlaying but if I change size the background color-space is not getting bigger (the gray area).
2. yes, some of the labels are now centered. But this is not exctly what I meant.

I would like to center everything, you can have a look here: https://pvanlagehero.de/ this is how it should look like.

And also: the labels are centered but if you look at long label-text comparing to the pictures, nothing is centered.

• This reply was modified 8 months ago by jesi707.

Hi @jesi707

If there’s a gray area it means that either the CSS I shared is conflicting with some other custom CSS that you already have on site or this one (form the one that I shared)

.forminator-radio-image,
.forminator-radio-image span {
  width:100px!important;
  height:100px!important;
}

is missing one of the selectors (one of the first two lines).

As I asked earlier, are you using any other custom code for the form already? If yes, could you maybe share it as is?

Let’s focus on this first and then get back to centering.

Kind regards,
Adam

Thanks for answering me and waiting for my late reply.

I checked it. You are right. There was some other code causing this error. Thanks.