1338546 - Qsurvey feedback options not centered on tablets

Status: NEW

(Websites :: Other, defect)

Description

[u549602]

Attachment: Tablet view.jpg

Environment: Beta
Device: SONY Xperia Z2 (Android 5.1.1 );
Build: 52.0b4 ;

Steps to reproduce:
1. Open Firefox and go to any webpage
2. Tap on device home button
3. Tap on Firefox icon
4. Repeat steps 2&3, 14 more times


Expected result: Qsurvey feedback page is opened and the options are centered   


Actual result: Qsurvey feedback page is opened but the options are not centered in page

Comment 1

[Kartikaya Gupta (email:[e-mail])]

I can repro in desktop firefox by going to the URL indicated and spoofing a tablet UA. Normal desktop UA string keeps it centered, so the site needs fixing. Specifically the website uses "margin: 0 auto" with a desktop UA, which balances the horizontal margins and centers the form. With mobile UA it uses "margin: 0" which doesn't do that.

Comment 2

[u549602]

Please note that this page is the default feedback page for all the branches and it will be accessed by all the firefox users after several entries so in my opinion, it should have a high priority.

Comment 3

[Mike Taylor [:miketaylr]]

I wonder who owns this site...

Comment 4

[Mike Taylor [:miketaylr]]

CSS lives at surveygizmo, but I bet we'll get more traction if we go through whoever runs the Firefox side of things (presumably we pay for this service): https://www.surveygizmo.com/2017.02.10.00/runtimejs/dist/survey/css/survey2.css

Comment 5

[Mike Taylor [:miketaylr]]

Hey Matt, does anyone on your team have a contact at SurveyGizmo that we can reach out to?

Comment 6

[Matt Grimes [:Matt_G]]

Thanks for the heads up. Looping in a couple of my folks. They can start the conversation with SG for you.

Comment 7

[Mike Taylor [:miketaylr]]

Thanks Matt.

Basically SG just needs to add auto to margin: 0 in the following selector, in their survey2.css:

.sg-survey.sg-int-virtual-page, .sg-survey.sg-mobile-optimized, .sg-survey.sg-mobile-optimized .sg-survey-form {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}

Comment 8

[Wesley Huang [:wesley_huang] (EPM) (NI me)]

it seems that because of the website content itself

Comment 9

[Mike Taylor [:miketaylr]]

Wesley, does somebody monitor this "Websites::Other" component? The content is controlled by SurveyGizmo -- hence it originally being moved to Tech Evangelism (the component we use when we need to ask external parties to fix things).

Comment 10

[Tyler Downer [He/Him]]

We actually control the css for our surveys on a per-survey basis, this is easy to fix.

Comment 11

[Mike Taylor [:miketaylr]]

Excellent! A simple fix is in Comment #7.