Urgent-Problems in Mobile view of survey

Question

Hello,I'm encountering an issue with my survey's mobile view. While it appeared fine during the mobile preview, upon attempting to check it via an anonymized link, a section of my survey is displaying incorrectly on mobile devices. This section comprises multiple questions involving HTML and JavaScript, with 3 to 5 tables included within the text. In mobile devices, options cover the tables, and they mix. I suspect there might be an issue with my CSS, but I haven't been able to pinpoint the problem.I am very close to launching and would very much appreciate it if you could help me solve this issue.I've attached screenshots illustrating the issue and HTML and CSS codes as well.HTML:

Assume you are traveling to ${e://Field/WorkerOrStudent} and have to pick between the options provided below for how to get there.

Which of these options do you pick?

Auto


Travel Time :
Travel Cost :
Parking Cost :
Condo Parking Cost :	(Condo charges per parking leave, plus monthly fee)

Passenger


Travel Time :
Travel Cost :
Parking Cost :
Condo Parking Cost :	(Condo charges per parking leave, plus monthly fee)

Transit


Travel Time :
Wait Time :
Walk Time :
Travel Cost :	(Condo offers 50% discount on transit fare)

Bike


Bike share station :
Bike share membership cost :	(100% cost paid by condo)
Bicycle parking :
E-bike share station :
Bike repair station :
Free annual Bike tuning :

Walk


Travel distance :

CSS:CSS:#CustomNextButton { background: #007ac0; font-family: Poppins, Arial, sans-serif; border: none; border-radius: 5px; padding: 8px 14px; font-size: 18px; color: #fff;}.option { background: #007ac0; color: white; float: left; margin-top: 10px; margin-bottom: 10px; margin-right: 20px; width: 325px; height: 425px; padding: 10px; border: 5px solid #007ac0; border-radius: 10px; font-size: 16px;}.OptionTitle { font-size: 20px;}table.attributeHolder, th, td { border: 1px #68c0f3 ; height: 25px; width: 320px; padding: 1px;}tr, td, th { border-bottom: 1px solid #ddd;}.attribute { padding: 1px; margin: 0px;}td.label { width: 60%;}p.attribute, td.attribute, tr.attribute, table.attribute { padding: 1px; margin: 0px;}td.attribute.value { max-width: 165px; max-height: 50px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: 0.0000002px; }.tooltip {position:relative; /* making the .tooltip span a container for the tooltip text */border-bottom:1px dashed #000; /* little indicater to indicate it's hoverable */}.tooltip:before {content: attr(data-text); position:absolute;/* vertically center */top:100%;transform:translateY(-50%);/* move to right */left:-25%;margin-left:0px;/* basic styles */width:250px;padding:5px;border-radius:5px;background:#000;color: #fff;text-align:left;line-height: normal;font-size: 12px;display:none; /* hide by default */}.tooltip:after {}.tooltip:hover:before, .tooltip:hover:after {display:block;}.video-container{ position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;}.video-container iframe, .video-container object, .video-container embed{ position: absolute; top: 0; left: 0;width: 100%;height: 100%;}

ahmedA · Accepted Answer

The issue is that your css is optimized for wide displays and is cramming all your options together. As you haven’t included the relevant JS, I am not sure how you are pushing the choices to the tables.

One solution could be wrap your entire question HTML in another div, lets call it holder. And assign it display flex. This will tell your browser not to overlap things.

<div id="holder">
....YOUR EXISTING HTML GOES HERE....
</div>

....YOUR EXISTING CSS....
#holder {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
	}

....YOUR EXISTING HTML GOES HERE....

....YOUR EXISTING CSS....#holder {display: flex;flex-wrap: wrap;flex-direction: row;justify-content: center;}

Reihan · Answer

Thank you @ahmedA. It solved my problem like magic. However, the JavaScript does not work to fill the values in the table in mobile devices. Travel time and travel distance have been saved from google maps in previous questions. If you could help me in this case, I would very much appreciate it.

I have attached the JS code for that question.

Thank you so much.

var Autotime = 1.2;
var Passtime = 1.2;
var Autocost = 0.5;
var Autoparkcost = "${q://QID57/ChoiceGroup/SelectedChoices}";

var Autohomepark = 1;
var Passhomepark = 0;
var Passcost = 0.25;
var Transittime = 1;
var Transitcost = 3;
var Transitwait = 4;
var Transitwalk = 3;
var BikeShstation = "Available";
var BikeshMem = 0;
var Bikepark = "Not Available";
var Ebikest = "Not Available";
var Repairst = "Not Available";
var Tuning = "One per year";
console.log(Qualtrics.SurveyEngine.getEmbeddedData("drivetime"))


if (Autoparkcost.toLowerCase() === "unsure") {
    Autoparkcost = "$10.0";
} else if (Autoparkcost.toLowerCase().includes("40 or more")) {
    Autoparkcost = "$40.0";
}

var numericAutoparkcost = parseFloat(Autoparkcost.replace('$', ''));
var Passparkcost = numericAutoparkcost / 2;


document.getElementById("driveTime_SP1").innerHTML = getModifiedTime(Qualtrics.SurveyEngine.getEmbeddedData("drivetime"), Autotime, 0);
document.getElementById("driveCost_SP1").innerHTML = "$" + getModifiedCost(Qualtrics.SurveyEngine.getEmbeddedData("drivedistance"), Autocost) ;
document.getElementById("driveParking_SP1").innerHTML =  Autoparkcost;
document.getElementById("drivehomepark_SP1").innerHTML = "$" + Autohomepark;

document.getElementById("PassTime_SP1").innerHTML = getModifiedTime(Qualtrics.SurveyEngine.getEmbeddedData("drivetime"), Passtime, 0);
document.getElementById("PassCost_SP1").innerHTML = "$" + getModifiedCost(Qualtrics.SurveyEngine.getEmbeddedData("drivedistance"), Passcost);
document.getElementById("PassParking_SP1").innerHTML = "$" + Passparkcost;
document.getElementById("Passhomepark_SP1").innerHTML ="$" + Passhomepark;

document.getElementById("BikeshareSt_SP1").innerHTML = BikeShstation;
document.getElementById("BikeshareMem_SP1").innerHTML = "$" + BikeshMem;
document.getElementById("Bikeparking_SP1").innerHTML = Bikepark;
document.getElementById("EbikeSt_SP1").innerHTML = Ebikest;
document.getElementById("Repair_SP1").innerHTML = Repairst;
document.getElementById("Tuning_SP1").innerHTML = Tuning;

document.getElementById("transitTime_SP1").innerHTML = getModifiedTime(Qualtrics.SurveyEngine.getEmbeddedData("LRTtime"), Transittime, 0);
document.getElementById("TransitWait_SP1").innerHTML = Transitwait + " minutes";
document.getElementById("TransitCost_SP1").innerHTML = "$" + Transitcost;
document.getElementById("Transitwalk_SP1").innerHTML = Transitwalk + " minutes";
document.getElementById("walkdistance_SP1").innerHTML = getModifiedDist(Qualtrics.SurveyEngine.getEmbeddedData("drivedistance")) + " km";

function getModifiedTime(time, factor, detour) {
	var newtime = parseInt(time) * factor + detour*60;
	var minutes = 0;
	var hours = 0;
	if (newtime > 3600) {
		hours = Math.floor(newtime / 3600);
		newtime %= 3600;
		minutes = Math.floor(newtime / 60);
		return (hours) + " hours and " + (minutes) + " minutes";
	} else {
		return Math.floor(newtime / 60) + " minutes";
	}
}

function getModifiedCost(distance, factor) {
	return ((parseInt(distance) / 1000) * factor).toFixed(1);
}

function getModifiedDist(distance) {
	return ((parseInt(distance) / 1000)).toFixed(1);
}

Leave a Reply

Sign up

Social Login

Login to the community

Social Login

Scanning file for viruses.

This file cannot be downloaded