"Pick, Group and Rank" question items alignment

Hi @giuliopalma 

did you put the pictures in by insert Graphic of bij Rich content editor? 

With Rich content editor you have more options to adjust the pictures

@RickB Thank you for replying to me. 
I found a solution to my original question.

However, I am facing a new problem:
when I insert a page break between the questions, Qualtrics changes me the dimensions of the group box. I am trying to work on my CSS and HTML code but unfortunately no luck for it.

I share here my CSS code:
 

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

.HotSpotContainer svg > path[fill="#00fe00"]
{fill: grey;}
.HotSpotContainer svg > path[fill="#fe0000"]
{fill: white;}

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

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

.Skin .horizontalbar .Slider .handle
{ background: black! important; border: black! important; }

div#QID58\~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: #FFFFFF !important; border-style: solid !important; border-width: 2px !important; color: #000000 !important; background-color: #FFFFFF !important;}
.Skin label.SingleAnswer.q-checked { color: #000000 !important; background-color: #FFFFFF !important;}

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

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

.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: 20% !important;}
.Skin .PGR .DragAndDrop .Group>div>ul, .Skin .PGR .DragAndDrop .Items>ul { min-height: 170px !important; } }

 
@Tom_1842  I know you are were good with CSS coding. Could you please suggest any changes on my CSS code?

Screenshot number one is with no page break. I would ideally like to have this outcome ‘even with page breaks between the questions’
Screenshot number two is what I obtained when I inserted a page break between the questions.

Many Thanks
Giulio 
 

@giuliopalma hmm it is hard to say just looking at the CSS code. If you can provide a QSF or Preview link to your survey, it can be more closely investigated.

• HI @Tom_1842  please find attache the preview links:
  
  
  - Test survey without page breaks
  https://southampton.qualtrics.com/jfe/form/SV_3arHSkaxtwHa0lM
  
  - Test survey with page breaks
  https://southampton.qualtrics.com/jfe/form/SV_06SpN4OjDX5nC1o
   

Thank you for providing the links to the test surveys. On my end, the Group containers are the same width when viewing both test surveys. Are you reviewing both test surveys on the same screen? The Group widths are being controlled by this CSS line:

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

If you wanted the Groups to be the same width across different screen sizes, you could try setting the widths in pixels instead of percentages. Maybe like:

.Skin .PGR .DragAndDrop .Group { width: 200px !important;}

@Tom_1842  Thank you it works. Really appreciate your help and time.