Image overlay text during image selection

  • Resolved jesi707

    (@jesi707)


    2 years, 2 months ago

    Hi,

    I’m using image choise for single and/or multiple choice. I would like to change the size of the images. But if I’m changing the size from default to a bigger size, the picture overlaps the text.

    Also I have a question: is there a possibility to adjust all content at the middle of the side?

    I would like to have a multi-side-form with one question on each page. It would be great to adjust content in the middle. Is this possible?

    Thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Laura – WPMU DEV Support

    (@wpmudev-support8)

    2 years, 2 months ago

    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

    Thread Starter jesi707

    (@jesi707)

    2 years, 2 months ago

    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 2 years, 2 months ago by jesi707.
    Plugin Support Laura – WPMU DEV Support

    (@wpmudev-support8)

    2 years, 2 months ago

    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

    Thread Starter jesi707

    (@jesi707)

    2 years, 2 months ago

    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.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Image overlay text during image selection’ is closed to new replies.