How Quizzes Display on Desktop and Mobile

Quizify quizzes are built to work on all screen sizes. The quiz layout adapts automatically between desktop and mobile, adjusting column counts, image sizing, and navigation placement so the quiz is usable regardless of the device a customer is using.


How the Quiz Layout Responds to Screen Size

Quizify uses responsive design principles. When the available screen width narrows — such as on a mobile device — the quiz layout adjusts:

  • Multi-column answer grids collapse to fewer columns

  • Images scale proportionally to fit the narrower width

  • Navigation buttons repositioned for thumb-friendly access

  • Text sizes adjust to remain readable at smaller sizes

These adjustments happen automatically — you do not need to create a separate mobile version of your quiz.


Column Count Differences

On desktop, grid layouts typically display three or four answer columns per row. On mobile:

  • A four-column grid typically collapses to two columns

  • A three-column grid may collapse to two or one column

  • A two-column grid may remain at two columns or collapse to one, depending on screen width

The exact behaviour depends on the column count you have set and the width of the device screen. Test in Preview using the mobile view to confirm the layout looks correct.


Image Sizing and Proportions on Mobile

Answer images and question images are scaled to fit the narrower mobile width. Images that look proportional on desktop may appear taller or more cropped on mobile, depending on the image dimensions and layout settings.

Use square or near-square answer images for the most consistent display across desktop and mobile.

On desktop, navigation buttons (Next, Back) often appear at the bottom of the answer list. On mobile, they may be repositioned to be more easily accessible — particularly if you have the sticky navigation setting enabled, which keeps them visible as the customer scrolls.


Settings That Can Be Configured Per Device

Some settings in Quizify are worth reviewing with mobile in mind:

  • Layout column count — While the quiz auto-adjusts column counts, review your layout settings to ensure the desktop configuration produces a sensible mobile result