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!

1) Maybe something like this:



2) This sounds like a device issue. Can you attach a small test survey?

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.

This should fix both the problem with iPhones zooming and the button margins.