Choice experiment card visualization on different screen sizes

Experiments
1

I have run into a problem while programming the survey, specifically in the part where we present the choice experiment cards. I am attaching screenshots of the layout on different devices (desktop, mobile, and tablet) so you can see exactly what I mean.

Since our survey will be tested through a social platform pool, it is very important that respondents can clearly see and compare the choice experiment cards on all devices. However, during testing, I noticed that the visualization changes depending on the screen size. On mobile phones, the cards are displayed well and are easy to compare, but on desktop and tablet screens they appear much larger.

Because the survey may be completed on different devices, I am concerned that these layout differences could affect how respondents view the alternatives and make their choices.

I have already made some modifications, which I present below, but I cannot figure out how to adjust the screen dimensions for different device types. I am sharing my current work below, and I would be very grateful for your help in resolving this issue.

Thank you in advance for your prompt reply.

Best regards,
Hristo

image
image1261×1167 149 KB

2

The code that fits best mobile screen is below:

.se_choice_table.se_scenario_fullscreen { border-collapse: separate; border-spacing: 24px 0; max-width: 900px; margin: 0 auto; } /* Header labels */ .se_choice_table thead td.alternative_label { background: #1b1 !important; color: #ffffff !important; border: none; border-radius: 12px 12px 0 0; padding: 14px 20px; font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; } /* Body cells */ .se_choice_table_cell { background: #ffffff !important; border-left: 1px solid #dce8d6; border-right: 1px solid #dce8d6; border-bottom: none; vertical-align: middle; padding: 0; } /* Attribute container */ .se_choice_table_cell .attribute> div { padding: ; border-bottom: 1px solid #eef2eb; } /* Attribute label */ .attr-label { font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #74956a; margin-bottom: 8px; display: block; } /* Attribute value */ .attr-value { font-size: 16px; font-weight: 800; color: #1a1a1a; display: block; } /* Price styling */ .attr-value-price { font-size: 22px; font-weight: 800; color: #1b4332; display: block; letter-spacing: -0.5px; } /* Image cell */ .se_choice_table_cell .attribute[name="x1"]> div { padding: 24px 24px 16px; border-bottom: 1px solid #eef2eb; } /* Footer */ .se_choice_table_footer { background: #f5f9f3 !important; border: 1px solid #dce8d6; border-top: 1px solid #dce8d6; border-radius: 0 0 12px 12px; padding: 14px 20px; } /* Selection button */ .se_choice_element_labeled { display: flex !important; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px !important; border: 2px solid #c2d6b8 !important; border-radius: 8px !important; cursor: pointer; transition: all 0.2s ease; background: #ffffff !important; background-image: none !important; font-size: 14px; font-weight: 600; text-align: center; color: #1b4332 !important; } .se_choice_element_labeled:hover { border-color: #1b4332 !important; background: #e8f0e4 !important; background-image: none !important; } /* Selected state */ .se_choice_element.se_selected, .se_choice_element_labeled.se_selected, .se_selectable.se_selected, .se_selectable.se_selected .se_choice_element_labeled, div.se_selected.se_choice_element, div.se_selected.se_choice_element_labeled, .se_choice_element.se_selected.se_choice_element_labeled { background: #1b4332 !important; background-image: none !important; border-color: #1b4332 !important; color: #ffffff !important; border-radius: 8px !important; } .se_selected .alternative_label, .se_selected span.alternative_label { color: #ffffff !important; } .se_choice_element_labeled input.choice { accent-color: #1b4332; } .se_selected::before, .se_selected::after, .se_selected *::before, .se_selected *::after { display: none !important; content: none !important; background-image: none !important; } /* Spacer columns */ .se_choice_table thead td:not(.alternative_label), .se_choice_table tbody td:not(.se_choice_table_cell), .se_choice_table tfoot td:not(.se_choice_table_footer) { width: 16px !important; background: transparent !important; border: none; }
3

Igor,
It would be a mistake to just jump in a try a one-size fits all solution - there are some critical research questions that you need to answer before doing so.

1. Decide on your real problem’
Are you trying to
a) maximise access by the largest number or people.
b) have a standard data set that everyone sees
c) defer a choice and decide once the data comes in

Central to each of these is detecting the device type.
See the meta data tutorials- specifically this one Device Type Tutorial

2. If you are trying to maximise Access

If you are trying to get as large a sample as possible and think that (say) 50% will use a small device then you need to optimise for both.

You need to think like a UX (User Experience Person). This means checking the device on small devices, tablets and desktops, orientations, browsers and OS.

While SurveyEngine has a good responsive framework - certain layouts - like the carrots DCE should be fine tuned for each. Good practise is to make everything readable (font etc) all chosen devices - this also means making the first action (choices etc ) ‘above the fold’ so your choice experiment needs to be viewable on a small device.

Most CSS options don’t need to know the actual device type - instead ‘snap’ to layouts depending on the screen width - you’ll see these as @media entries on CSS.

This will be a combination of review, content and developing the css and JS custom layout yourself. ChatGPT is pretty good for this.

2. If you want a standard data set
Decide up front if you want Desktop or Mobile and the preferred orientation.
Use the meta-data tutorial to capture the device type and screen out those on (say) phones.

You can also force the orientation under Edit→Layout to be only ladscape or portrait.

**3. If you want to defer the decision until you have data
**
Then collect the device type (and perhaps force landscape).
Then run a short sample of perhaps 200 - and check the results. If they differ, for example if the LR statistic in the models is different - or the proportions of use favour one, then decide.