Image format

Hi @josen96

I hope you are doing well today.

By default image will be resized to fit container. If your goal is to have larger image please note it will not only have bigger height but also width, which will end with additional horizontal scroll.

I guess this will be possible. Could you export your form, upload to good drive and share a link in your next replay so we could take a closer look?

Kind Regards,
Kris

I tried to increase the width and height of the image but it only becomes bigger on the computer web page, on the mobile it doesn’t change, it still looks small.

Here is the form.

https://drive.google.com/file/d/1N_aTtGy70mSqe5YRKYgLs5Ubj-K6WkBr/view?usp=sharing

• This reply was modified 11 months, 2 weeks ago by josen96.

Hi @josen96,

I’m afraid, the Google Drive URL doesn’t seem to be public, so I couldn’t check the form export.

Could you please update that, so that we could check further?

Kind Regards,

Nithin

Sorry, I think it should be in public.

• This reply was modified 11 months, 2 weeks ago by josen96.

Hi @josen96,

Could you please try the following custom CSS and check if that helps?

@media only screen and (max-width: 600px) {
 #html-4 img {
    max-width: unset;
}
}

You can try adding the above provided CSS at the Custom CSS option under the Appearance tab of the form.

I hope that helps.

Kind Regards,
Nebu John

Thank you very much for the help, but I have just tried it and there has been no change.

Hi @josen96

Thank you for trying that. Since it didn’t work, could you please try again but with a small change?

Try this version:

@media only screen and (max-width: 600px) {
 #html-4 img {
    max-width: unset!important;
min-width:300px!important
}
}

Note:
1. do replace 300px value with whatever minimum width of the image you’d like to have on mobile devices
2. and make sure to clear all cache on site/server after adding the code; also note that you may need to a) regenerate any optimized CSS assets if you are using some sort of CSS optimization tools on site and b) it may be necessary to clear browser cache as well.

Best regards,
Adam

Hi, I have deleted the cache and updated the css and it does nothing, it seems that it does not allow to change the dimensions of the image from the mobile.

Hi @josen96,

Possible to check whether you could share a page URL where you have the form, so that we could have a better idea?

If you don’t want to share the URL publicly, you can share by sending the page URL via the following email: [email protected] using this template:

Subject: "ATTN: WPMU DEV support - wp.org"

Message: Ticket URL

Looking forward to your response.

Kind Regards,

Nithin

Yes, here is the link: https://interinvestigacion.com/physical-literacy/english/physical-literacy-questionnaire-for-children

The images are at the end of the questionnaire.

Hi @josen96,

Could you please try the following CSS and see how it behaves:

@media only screen and (max-width: 800px) {
#forminator-module-3151 .forminator-pagination--content .forminator-row .forminator-field-html .forminator-field p {display:block !important; overflow:scroll !important;}
}
#forminator-module-3151 .forminator-pagination--content .forminator-row .forminator-field-html .forminator-field p img { max-width:800px !important;}
}

You can remove the previous CSS provided and add the above CSS via the default WordPress customizer, under Appearance > Customize > Additional CSS.

Please do check and see how that goes.

Kind Regards,

Nithin

Hi @josen96,

Since we haven’t heard from you for a while. I’ll mark this thread as resolved for now. Please feel free to open a new thread if you have new queries.

Best Regards
Nithin

Sorry, I couldn’t reply earlier

I just tried the code and it’s still the same

Hi @josen96,

I hope you are doing well today!

I checked the mentioned images and it seems the image size is not the real issue here as it will be resized to fit in the mobile screen as per the responsive design.

https://prnt.sc/fow3FcmGaT9H

If you want those more readable on small screens, you need to make sure to use the images with high resolution (which the visitors can zoom) or use table on HTML field to construct those tables as a better approach.

Kind regards,
Zafer

Hi, how can I make my survey look like the image you have sent to my mobile phone?

I’ve been adding all the codes but none of them have modified it like the image you have just uploaded.

Thanks