- Posts: 33
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Responsive Image
- wizard2none
- Topic Author
- Offline
- Junior Member
Less
More
6 years 7 months ago #157593
by wizard2none
Responsive Image was created by wizard2none
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:
I thought from this linklink it should resize with the screen due to the max-width being set.
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.
The topic has been locked.
- LouisGac
- Visitor
6 years 7 months ago #157606
by LouisGac
Replied by LouisGac on topic Responsive Image
templates are using bootstrap, so see bootstrap documentation:
getbootstrap.com/docs/3.3/css/#images
getbootstrap.com/docs/3.3/css/#images
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10612
- Thank you received: 3691
6 years 7 months ago - 6 years 7 months ago #157613
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on 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: 6 years 7 months ago by tpartner.
The following user(s) said Thank You: wizard2none
The topic has been locked.
- wizard2none
- Topic Author
- Offline
- Junior Member
Less
More
- Posts: 33
- Thank you received: 0
6 years 7 months ago - 6 years 7 months ago #157618
by wizard2none
Replied by wizard2none on 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.
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: 6 years 7 months ago by wizard2none.
The topic has been locked.