Custom CSS to increase font size for matrix questions ONLY when taken on a mobile device | XM Community
Skip to main content
Does anyone have experience with building custom CSS that would increase the font size on a matrix table when someone was taking the survey from a mobile device? If they were taking the survey from a desktop, the font would remain unchanged. I believe it would be a media query that controlled the text under a certain screen size.
Hi Emille,



Copy the below code to your header section to increase the font via increasing the zoom level of the question.



``

<script>

dev = (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);

if(dev) {

jQuery(".Skin #SkinContent").css("zoom","1.5");

}

</script>``

<br/>

Please let me know if this not helps...<br/><br/>
Hi Yash , Thank you for your response!



When applying the code, it looks like it is working to zoom, but the text itself does not actually increase in size. If possible, we'd need the code to actually increase the font size to something like 19.
Hi Emilie,



Please use the below one instead...





``<script>

dev = (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);

if(dev)

{

jQuery(".Skin .QuestionBody").css("font-size","19px"); // adjust this as per you need...

jQuery(".Skin label.QuestionText").css("font-size","19px"); // adjust this as per you need...

}

</script>``
Hi Yash,



Thank you for following up, it is much appreciated!



After installing the code in the header section, it looks the same as if the code wasn't added. It feels as though there is an element of the code that isn't detecting that I'm on a mobile device...
Hi Emilie,



I'm not sure why this code is not working to you could you please try to increase the font size i.e. as below:



<script>

dev = (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);



if(dev)

{

jQuery(".Skin .QuestionBody").css("font-size","50px"); // adjust this as per you need...

jQuery(".Skin label.QuestionText").css("font-size","50px"); // adjust this as per you need...

}

</script>







just want to know which device you are using maybe iPhone but it is working for android phones.
@Emilie_Morgan



Could it be easier to use display logic for mobile versus non-mobile devices? This is native to Qualtrics. You can then customize either experience as you'd like.



Then simply map the questions to new embedded data in the Survey Flow to combine the results regardless of device type.

Leave a Reply


Terms & Conditions