Problem with visual layout changing when zooming in the bowser - Pick, Group and Rank question | XM Community
Question

Problem with visual layout changing when zooming in the bowser - Pick, Group and Rank question

G
Rank
Badge +3

Hello all,

I'm testing a survey for a project and noticed that the figures are displayed in a single row when my browser's zoom is around 75%. Initially, when the zoom level was higher, the figures appeared in two rows.

I want to prevent this issue and ensure that the figures for each group are always displayed in a single row, regardless of the browser's zoom level.

Could you please suggest how can I avoid this ?
@Tom_1842 , @TomG and others etc

Find enclosed here the link for the survey:
https://southampton.qualtrics.com/jfe/form/SV_06SpN4OjDX5nC1o

Find enclosed here my CSS code:

.Skin .SkinInner
{width: auto!important; max-width: 80%!important;}

.HotSpotContainer svg > path[fill="#CCCCCC"]
{fill: grey;}
.HotSpotContainer svg > path[fill="#000000"]
{fill: black;}

.HotSpotContainer svg > path[fill="#CCCCCC"]
{fill: grey; fill-opacity: 1.0 !important;}

.Skin label.MultipleAnswer, .Skin label.MultipleAnswer.q-focused, .Skin label.SingleAnswer
{ background: #FFFFFF! important;}

.Skin .horizontalbar .Slider .handle
{ background: black! important; border: black! important; }
div#000000\~1\~handle { background: black! important;}


.Skin.QuestionOuter { padding-bottom: 0px; }
@media (max-width:200px) {.Skin.QuestionOuter.QuestionBody {padding-bottom:0px !important;}}

.Skin.QuestionText
{padding: 0 0 0px;}
.Skin.QuestionBody {padding:0px 0px 0px 0px;}
.Skin #Plug a {color: #FFFFFF;}
.Skin #Plug a {font-size: 0px; color: #FFFFFF; text-decoration: none; padding: 0px 0px;}
.Skin #PushStickyFooter {height: 0px;}
.Skin #BrandingFooter, .Skin #Footer {margin-top: 0px;}
.Skin label.SingleAnswer.q-checked.q-focused { color: #000000 !important; border-style: solid !important; border-width: 2px !important; color: #000000 !important; background-color: #CCCCCC !important;}
.Skin label.SingleAnswer.q-checked { color: #000000 !important; background-color: #CCCCCC !important;}
.Skin label.q-radio {border: 2px solid #000000; color: #000000 !important; }

.Skin label.SingleAnswer.q-checked.q-focused>span::before,
.Skin label.SingleAnswer.q-checked>span::before,
.Skin label. q-radio.q-checked,
.Skin label.q-radio.q-checked.q-focused { border: 2px; background-color: #CCCCCC !important; }
Skin li:last-child label.SingleAnswer>span::before, 
.Skin li:last-child label.SingleAnswer.q-focused>span::before { border:2px !important; color: #000000 !important; }


.Button{ width: 130px; height: 130px; }
.Skin #Buttons #NextButton, .Skin #Buttons #PreviousButton {font-size:30px;}

.Skin.PGR .DragAndDrop.Group ul, .Skin .PGR .DragAndDrop .Items h2, .Skin .PGR .DragAndDrop .Items ul { width: 350px;}
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div h2, .Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div ul {width: 350px;}
.Skin .PGR .DragAndDrop .NoColumns td.groupsContainerTd div>div {width: 350px;}

.Skin.PGR.DragAndDrop.QuestionBody {width:300px;max-width:280px;}
.Skin.PGR.DragAndDrop.QuestionText {width:300px;max-width:280px;}
.Skin #SkinContent {max-width:100% !important;}
.Skin .PGR .DragAndDrop .QuestionBody.Group>div>ul>li, Skin. RO.DND>ul>li { padding: 10px 2em 10px 50px;}

.Skin.PGR.DragAndDrop.Group h2 {border-bottom: 2px solid #000000;padding: 5px;background: #FFFFFF;}
.Skin.PGR.DragAndDrop.Group h2 {border-bottom: 2px solid #000000; padding: 5px; background: #FFFFFF; color:#FFFFFF;}
.Skin.PGR.DragAndDrop td.groupsContainerTd div > div 
{border: 2px solid;
border-collapse: collapse;
min-height: 50px;
min-width: 500px;
height: 250px;}

.Skin.QuestionText{max-width: 100% !important}
.SkinContent{ width:300vw; } .Skin.QuestionOuter.Matrix{ width:300vw; max-width:300vw; }
Skin.PGR.DragAndDrop td.itemsContainerTd {width:100% !important;}

Skin label.MultipleAnswer, .Skin label.MultipleAnswer.q-focused, .Skin label.SingleAnswer { padding: 10px; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0;
-o-border-radius: 0; border-radius: 0; text-align: left; background: #FFFFFF; padding-right: 10px; }

@media (min-width:300px) {
.Skin .PGR .DragAndDrop .Group h2 { width: 100% !important;}
.Skin .PGR .DragAndDrop .Group { width: 240px !important;}
.Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul { min-height: 160px !important; } }

# Mobile first
input, textarea, select { font-size: 16px;}

# Tablet upwards
@media (min-width: 768px) { font-size: 14px;}

@media screen and (-webkit-min-device-pixel-ratio: 0) { select:focus, textarea:focus, input:focus { font-size: 16px; }}
@media screen and (max-width: 767px) { select:active, input:active,textarea:active{  font-size: 16px; }}

.no-zoom { font-size: 16px; transform-origin: top left;  transform: scale(0.875);    //  14px / 16px padding: 4.57px;  // 4px / 0.875}


 

2 replies

G
Rank
Badge +3

Hi @Tom_1842  do you notice any error in the code ?

Tom_1842
Rank
Userlevel 7
Badge +27

@giuliopalma I would first recommend to remove all your CSS and add rules one at a time to ensure they are affecting your survey in the way you want. What I think is happening is that the Groups are defined to be 240px and the Groups go to a new line when they are too wide to fit in one line in the Groups Container. I think the 240px takes up more of the available screen space the further in the zoom and so a second line gets added when you zoom in. To have your widths be based on screen size instead of pixels, you can try updating your CSS to use percentages, like in the below:

.Skin .PGR .DragAndDrop .Group {
width: 20% !important;
}

You might also want to include some CSS that adjusts the width of the Group Headers and the items once they are placed in the Groups. Also, since your items are pictures, you may want to hide the rank once placed in the Group.

.Skin .PGR .DragAndDrop .Group h2 {
width: 100% !important;
}

.Skin .PGR .DragAndDrop .Items > ul, .Skin .PGR .DragAndDrop .Group > div > ul {
width: 100% !important;
}

.rank {
display: none !important;
}

I have some more PGR CSS in this post that might help with your question layout.

Leave a Reply


Terms & Conditions