Field width

Hi @lieuwe1957

I hope you are doing good today.

Could you try in HTML field this code and play around width and height of your image:

<p><img style="float: left; width: 100px; height: 50px; margin-right: 20px;" src="https://yourdomain.com/wp-content/uploads/2021/11/image.jpg" /> Question #1: this is question</p>
just correct path for each image.

Kind Regards,
Kris

Hi Kris,

still 50/50: https://www.lieuwemontsma.nl/Disrupt/sustainability-questionnaire/

cu

lieuwe

Hi @lieuwe1957

You will need some CSS.

This is for the first HTML field but you can extend to other fields if necessary:

https://monosnap.com/file/jW966w2kNrB9nGeXrYMAkuByDh3VjQ

@media only screen and (min-width: 991px) {
 .forminator-ui #html-1{
    max-width: 25%;
  }

 .forminator-ui #html-1 img{
    width: 100% !important;
    height: 100% !important;
 }
}

Add it to Form > Appearance > Custom CSS.

Best Regards
Patrick Freitas

Hi Patrick,

that’s magic: your link shows exactly what I need.
but adding the css at Form > Appearance > Cusom css and leaving all the same in the HTML field (as Kris showed me) does not bring any improvement!! Still have the same. see:

how weird is this? unpublished, save, published, many many times, without result.
what am I doing wrong?

Lieuwe

Hello @lieuwe1957 !

That’s definitely very odd – I’ve also checked and the code provided by Patrick did work on my end as well. Hmm. Let’s try one more time.

Please remove the style from the element and the CSS provided in the previous reply and only add this:

@media screen and (min-width: 991px) {
  #forminator-module-175 #html-1 {
    max-width: 25% !important;
  }

 #forminator-module-175 #html-1 img {
    width: 100% !important;
    height: 100% !important;
 }
}

When adding the code, please watch out for any notifications on the gutter with the line numbers. Yellow triangles mentioning the use of !important are okay, but anything else shouldn’t be there.

Warm regards,
Pawel

Hi Pawel,
thx for the repsonse
unfortunately it doesn’t work.
emptied all from the element and added css as proposed.
nothing changed.

how come that it does work at your side? as shown in the screendump?

regards

lieuwe

Hello @lieuwe1957

Can you please try to remove the custom code from WP admin > Forminator > Forms > Edit Form > Appearance > Custom CSS and use the native WP Customizer instead? That would be WP admin > Appearance > Customize > Additional CSS. Let us know how that goes.

Thank you,
Dimitris

Hi Dimitris,

this works!!!!
great, thanks.!!!!
so, I can repeat this for all other elements, just by adding same lines, with different element #.
one question left: what is the meaning of the module #?
do I need to change it when using another form?
how can I find the module #

Hi @lieuwe1957

The # is the ID of your form:

https://monosnap.com/file/sHfmFlcxbkgXVjdkjrwrgM0f043AuG

Since we select using # on CSS it will be #forminator-module-15, so it needs to be updated for different forms yes.

To find more about selectors https://www.w3schools.com/cssref/css_selectors.asp

Best Regards
Patrick Freitas

Hi Patrick, Dimitris, Pawel and Kris,

thanks for all the support!!!
fast and reliable, absolutely great!!!!

my proposal for improvement of the plugin would be predefined css classes (or another way) to set the width of elements.

regards from a very happy user

Lieuwe