How do you get images to be responsive in questions (i.e. resize based on screen size)?

Let me start by confessing I'm new to LS & CSS/HTML.

I'm running LS on LimeSurvey.org using the Default Template (running latest stable version i.e. 2.67).


The Default Template in CSS file "flat_and_modern.css" has:
img {
max-width: 100% !important;
}

In the text of a question I have:
<p><img alt="" src="/upload/surveys/856746/images/some_image.jpeg" /></p>

Issues:

• The image does not appear to be contained in width it's container
  The window does not resize as I narrow the browser window.
[/li]

I thought from this linklink it should resize with the screen due to the max-width being set.

templates are using bootstrap, so see bootstrap documentation:
getbootstrap.com/docs/3.3/css/#images

Can you activate a test survey and give us a link so we can see what CSS is having an affect?

Hi Gang,

I finally noticed the issue. The img { max-width: 100% !important; ...} that is already there is encapsulated within a @media print {...}. So image is only being resized for printing. Hadn't noticed since the @media print {...} is over 80 lines of code and the Template Editor only shows a portion of these lines at a time.

So it does work if you add a img { max-width: 100% !important; ...} anywhere else in the file, but, outside any encapsulating constraining declaration.

Since bootstrap is used by this template, you can also get resizing by using <img alt="" class="img-responsive" src="MyImagePath" /> as suggested by LouisGac.

This probably also explains why rocketshops images were not being responsive on mobile until he did as suggested (see www.limesurvey.org/forum/design-issues/1...responsive-on-mobile ).

Thanks to LouisGac & tpartner for your suggestions.