Improved the solutions to be more mobile friendly

This commit is contained in:
Tiago Ribeiro
2023-04-20 22:55:24 +01:00
parent 02d76e4c3c
commit ed11d6f9d6
6 changed files with 41 additions and 21 deletions

View File

@@ -52,8 +52,8 @@ function Question({
return (
<div className="flex flex-col items-center gap-4">
<span>{prompt}</span>
<div className="grid grid-cols-4 gap-4 place-items-center">
<span className="text-center">{prompt}</span>
<div className="grid grid-rows-4 md:grid-rows-1 md:grid-cols-4 gap-4 place-items-center">
{variant === "image" &&
options.map((option) => (
<div
@@ -117,8 +117,8 @@ export default function MultipleChoice({id, prompt, type, questions, onNext, onB
return (
<>
<div className="flex flex-col items-center gap-8">
<span className="text-lg font-medium text-center px-48">{prompt}</span>
<div className="flex flex-col items-center gap-4">
<span className="text-base md:text-lg font-medium text-center px-2 md:px-4 lg:px-48">{prompt}</span>
{questionIndex < questions.length && (
<Question
{...questions[questionIndex]}