Please help us help you and fill where relevant:
Your LimeSurvey version: Version 5.4.3+220926
Own server or LimeSurvey hosting: LimeSurvey Hosting
Survey theme/template: fruity
==================
Dear all,
I finished my survey today and I had to use many images. On the desktop version everything looked fine, but when i checked on the mobile version the pictures dont adjust automatically. They go out of the screen and the user experience is really bad through it. Do you know how I can change it? 

Thanks

Hi,
what type of images (*.jpeg, *.png,...)?
Did you use the class "img-responsive"?
 
  
As LimeSurvey uses the bootstrap 3 library.
[url] getbootstrap.com/docs/3.3/css/#images [/url]

Better you show how you inserted the images, provide a lss export of this question.

Joffm

Hi,
thanks for your quick reply! I used .png images, but I didn't use the class "img-responsive" (and I don't really know how to use it haha).

I added a lss-export of my survey, hope this help.

Thanks again!!
ju1211

If you have many images in the question texts, it will be easier to add global styles.

Extend your theme - manual.limesurvey.org/New_Template_System_in_LS3.x/en

Add something like this to the custom.css file:

Well, a typical GIGO error
GIGO? (Garbage in - Garbage out), oder auf deutsch "Mist rein - Mist raus".

How do you imagine the images to resize if you add a fixed width and height?
Set a percentual width and everything is fine.
Or you insert the class "img-responsive" without any width
<img alt="" class="img-responsive" src="path_to_image/Boot001_gross.jpg" />


Here with percentual width:
Upper image "width:40%"
Lower image "still your fixed width"

Full screen
 
  
smartphone
You see the lower image does not resize


Joffm

P.S.
Of course, you can distinguish between desktop and mobile devices to show different percentages (e.g. show only 50% on desktop, but 100% on mobiles).
But this you could ask in the German part.

 

I didn't see the inline styles as I'm on my phone but this should override them:

@tpartner,
isn't this the same that is done by ".img-responsive"?

Here the phrase in bootstrap.com 
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class.
This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

Or is there a difference, except the "!important"?

Joffm

Yes, it is the same as the "img-responsive" class but adding it to custom.css will avoid the requirement to add that class-name to many images. (ju1211 says they have "many images")

The !important property just makes it a little stronger to override any previously inserted inline height or width styles.[/i][/i]

Oh, I see,
I did not think about an insertion into "custom.css".

Joffm