- Posts: 2
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Responsive Images & Screen Resizing Problem when using a Mobile Device
- aventinox
- Topic Author
- Offline
- New Member
Less
More
5 years 10 months ago #169267
by aventinox
Responsive Images & Screen Resizing Problem when using a Mobile Device was created by aventinox
Hi!
I'm currently running into two issues whilst designing a new Survey [using LimeSurvey Version 3.8.1+180524].
1. Mobile friendly / responsive images
I'd like some pictures to float right and being able to specify image dimensions using width=XXXpx, but still have them come up as width:100% as well as in block design when browsing on a mobile device. Bootstrap float-right doesn't really work here ... and if I specify the width, these specifications will also be used on mobile. This surely isn't a LimeSurvey related issue, but maybe someone knows of a quick fix here ...
2. Auto Screen Resizing when using Dropdowns
When a dropdown field is selected on a mobile device, the screen zooms into the dropdown full width, but doesn't shrink back to regular size when moving on to the next field. This will make the user manually size down the screen again after leaving a dropdown ... happens on Vanilla as well as on Fruit template. Is there any way to solve this - either by not having the auto zoom on the dropdown, or - more optimally - resize the screen back to full width of the main container after leaving the dropdown?
Any input is highly appreciated!
I'm currently running into two issues whilst designing a new Survey [using LimeSurvey Version 3.8.1+180524].
1. Mobile friendly / responsive images
I'd like some pictures to float right and being able to specify image dimensions using width=XXXpx, but still have them come up as width:100% as well as in block design when browsing on a mobile device. Bootstrap float-right doesn't really work here ... and if I specify the width, these specifications will also be used on mobile. This surely isn't a LimeSurvey related issue, but maybe someone knows of a quick fix here ...
2. Auto Screen Resizing when using Dropdowns
When a dropdown field is selected on a mobile device, the screen zooms into the dropdown full width, but doesn't shrink back to regular size when moving on to the next field. This will make the user manually size down the screen again after leaving a dropdown ... happens on Vanilla as well as on Fruit template. Is there any way to solve this - either by not having the auto zoom on the dropdown, or - more optimally - resize the screen back to full width of the main container after leaving the dropdown?
Any input is highly appreciated!
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 10 months ago #169277
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 Images & Screen Resizing Problem when using a Mobile Device
1) Maybe something like this:
2) This sounds like a device issue. Can you attach a small test survey?
Code:
.my-image { float: right; width: 400px; max-width: 100%; } @media (max-width: 480px) { .my-image { display: block; float: none; margin: 0 auto; } }
2) This sounds like a device issue. Can you attach a small test survey?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- aventinox
- Topic Author
- Offline
- New Member
Less
More
- Posts: 2
- Thank you received: 0
5 years 10 months ago - 5 years 10 months ago #169305
by aventinox
Replied by aventinox on topic Responsive Images & Screen Resizing Problem when using a Mobile Device
Tony,
thanks for the suggestion reg. the image design issue! This gives me something to tinker around with and I'll see if I can make it work.
Part 2) Seems like you're right (device related issue). If I open the survey on Mac Safari and switch over to developer responsive mode, it all shows up properly. On an iPhone X, the following two issues appear:
1) When selecting a dropdown, screen zooms into the dropdown but doesn't shrink back (already mentioned)
2) No padding / margin for the "next" button - it sticks right to the border of the screen (this one might NOT be device related, since it's the same on Desktop when switching to responsive display) ---> Example Survey Attached.
thanks for the suggestion reg. the image design issue! This gives me something to tinker around with and I'll see if I can make it work.
Part 2) Seems like you're right (device related issue). If I open the survey on Mac Safari and switch over to developer responsive mode, it all shows up properly. On an iPhone X, the following two issues appear:
1) When selecting a dropdown, screen zooms into the dropdown but doesn't shrink back (already mentioned)
2) No padding / margin for the "next" button - it sticks right to the border of the screen (this one might NOT be device related, since it's the same on Desktop when switching to responsive display) ---> Example Survey Attached.
Attachments:
Last edit: 5 years 10 months ago by aventinox.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
5 years 10 months ago #169324
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 Images & Screen Resizing Problem when using a Mobile Device
This should fix both the problem with iPhones zooming and the button margins.
Code:
@media only screen and (max-width: 768px) { #navigator-container > div { padding: 0 15px; } select.form-control { font-size: 16px; height: auto; } }
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.