Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

CSS code for informing users to see a screen in a landscape mode on the mobile

I am designing a survey with a partial profile study. I want the respondents taking the survey on the mobile to see the Conjoint screens in the landscape mode. I tried a few methods. The most appropriate one shows the alert in both the landscape and portrait mode whereas, I want the users to see the alert only in the portrait mode!
asked Aug 28 by Megha Saran

2 Answers

0 votes
The code where you are trying to alert, please add below condition so that it alerts only when screen width is less than screen height.


And if you want to alert only if width< height and width < some required range , add $(window).width()<x, change 1100 to required width.

if($(window).width()<$(window).height() && $(window).width()<1100)
answered Aug 28 by Rahul Mittal Gold (11,135 points)
0 votes
So rotating a mobile device triggers a resize event.

I would suggest the following code (which I've used and works):

function SetLandscapeNotice(){
    var $containerHeight = $(window).height();
    var $containerWidth = $(window).width();
    if ($containerHeight > $containerWidth) {
        display: 'block'
    else {
            display: 'none'

$(document).ready(function () {
    SetLandscapeNotice();//run when page first loads

$(window).resize(function () {
    SetLandscapeNotice();//run on every window resize

[Please before the question itself]
<div id="LargeNeeded" style="display: none"><br>
You may wish to rotate your device to landscape mode for this question.<p></div>
answered Oct 8 by Corey1975 Bronze (980 points)