Fix MultiplePictureChoice layout

Author: EkaterinaVu

examples/questionnaire/Example.vue

@@ -106,30 +106,30 @@
            new QuestionModel({
             id: 'multiple_choice_image',
             tagline: "Let's take it one step further",
-            title: 'Tell us about your favorite social network 😍',
+            title: 'Tell us what is your favorite social network 😍',
             helpTextShow: false,
             type: QuestionType.MultiplePictureChoice,
             multiple: false,
             required: true,
             options: [
               new ChoiceOption({
-                imageSrc: require('../../src/assets/images/facebook.png'),
-                imageAlt: 'facebook logo',
+                imageSrc: require('./assets/images/facebook.png'),
+                imageAlt: 'Facebook logo',
                 label: 'Facebook'
               }),
               new ChoiceOption({
-                imageSrc: require('../../src/assets/images/twitter.png'),
-                imageAlt: 'twitter logo',
+                imageSrc: require('./assets/images/twitter.png'),
+                imageAlt: 'Twitter logo',
                 label: 'Twitter'
               }),
               new ChoiceOption({
-                imageSrc: require('../../src/assets/images/instagram.png'),
-                imageAlt: 'instagram logo',
+                imageSrc: require('./assets/images/instagram.png'),
+                imageAlt: 'Instagram logo',
                 label: 'Instagram'
               }),
               new ChoiceOption({
-                imageSrc: require('../../src/assets/images/tiktok.png'),
-                imageAlt: 'tiktok logo',
+                imageSrc: require('./assets/images/tiktok.png'),
+                imageAlt: 'TikTok logo',
                 label: 'TikTok'
               }),
             ]

examples/questionnaire/assets/images/facebook.png

@@ -634,7 +634,7 @@ header.vff-header svg.f-logo {
 */
 
 .vff .field-multiplepicturechoice ul.f-radios{
-  max-width: 800px;
+  max-width: 790px;
   min-width: auto;
   display: -ms-flexbox;
   display: flex;
@@ -671,7 +671,7 @@ header.vff-header svg.f-logo {
   justify-content: center;
   overflow: hidden;
   width: 100%;
-  height: 164px;
+  height: 150px;
   margin-bottom: 8px;
 }
 
@@ -944,8 +944,6 @@ header.vff-header svg.f-logo {
 
   .vff .field-multiplepicturechoice ul.f-radios li{
     font-size: 14px;
-    -ms-flex: 0 0 calc(33.3333% - 8px);
-    flex: 0 0 calc(33.3333% - 8px);
   }
 
 }
@@ -1021,8 +1019,8 @@ header.vff-header svg.f-logo {
     font-size: 16px;
   }
 
-  .vff .field-multiplepicturechoice ul.f-radios li span.f-image{
-    height: 130px;
+  .vff .field-multiplepicturechoice ul.f-radios {
+    max-width: 360px;
   }
 
   .vff .field-multiplepicturechoice ul.f-radios li{