Responsive Image

More
2 months 1 week ago #157593 by wizard2none
wizard2none created the topic: Responsive Image
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.

Please Log in to join the conversation.

More
2 months 6 days ago #157606 by LouisGac
LouisGac replied the topic: Responsive Image
templates are using bootstrap, so see bootstrap documentation:
getbootstrap.com/docs/3.3/css/#images
The following user(s) said Thank You: wizard2none

Please Log in to join the conversation.

More
2 months 6 days ago - 2 months 6 days ago #157613 by tpartner
tpartner replied the topic: Responsive Image
Can you activate a test survey and give us a link so we can see what CSS is having an affect?

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 2 months 6 days ago by tpartner.
The following user(s) said Thank You: wizard2none

Please Log in to join the conversation.

More
2 months 6 days ago - 2 months 6 days ago #157618 by wizard2none
wizard2none replied the topic: Responsive Image
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.
Last Edit: 2 months 6 days ago by wizard2none.

Please Log in to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now