Merge pull request eduardconstantin#113 from eduardconstantin/fix/responsive-layout

Fix/responsive layout

Author: eduardconstantin

app/exam/page.tsx

@@ -92,7 +92,7 @@ const Exam: NextPage<{ searchParams: { url: string; name: string } }> = ({
   const numberOfQuestions = data.randomQuestions.length || 0;
 
   return (
-    <div className="py-10 px-5 mb-6 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
+    <div className="py-10 px-5 mb-6 mx-auto w-[90vw] lg:w-[60vw] 2xl:w-[45%] bg-slate-800 border-2 border-slate-700 rounded-lg">
       <div>
         <div className="px-2 sm:px-10 w-full flex flex-row justify-between items-center">
           <p className="text-white font-bold text-sm sm:text-2xl">

app/modes/page.tsx

@@ -7,15 +7,15 @@ const Modes: NextPage<{ searchParams: { url: string; name: string } }> = ({
   const { url, name } = searchParams;
 
   return (
-    <div className="mx-auto mb-6 w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
+    <div className="mx-auto mb-6 w-full md:w-[90vw] lg:w-[70vw] 2xl:w-[45%] text-center">
       <h2 className="text-white text-4xl text-leading font-bold uppercase md:mt-14">
         {name}
       </h2>
       <p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
-        Test your knowledge under pressure with our timed exam mode, or explore
-        and master over 480 questions at your own pace with our practice mode.
+        Test your knowledge under pressure with our timed exam mode or explore
+        and master all the questions at your own pace with our practice mode.
       </p>
-      <div className="flex max-sm:flex-col max-sm:align-center justify-center gap-10 sm:mx-16">
+      <div className="flex max-sm:flex-col max-sm:align-center justify-center gap-10 mx-5 md:mx-16">
         <ExamLink
           href={{
             pathname: "/practice",

app/page.tsx

@@ -4,14 +4,14 @@ import exams from "@azure-fundamentals/lib/exams.json";
 
 const Home: NextPage = () => {
   return (
-    <div className="mx-auto mb-6 w-5/6 sm:w-2/3 lg:w-2/3 xl:w-2/4 text-center">
+    <div className="mx-auto mb-6 w-full lg:w-[70vw] 2xl:w-[45%] text-center">
       <h2 className="text-white text-5xl text-leading font-bold uppercase md:mt-14">
         Welcome!
       </h2>
       <p className="text-white text-lg mt-4 mb-14 px-5 leading-6">
         Select a Microsoft Azure exam from the list bellow.
       </p>
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-5 sm:mx-16">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-10 gap-y-5 mx-5 lg:mx-0">
         {exams.map((exam) => {
           return (
             <NameLink

app/practice/page.tsx

@@ -58,7 +58,7 @@ const Practice: NextPage<{ searchParams: { url: string; name: string } }> = ({
   if (questionsError) return <p>Oh no... {questionsError.message}</p>;
 
   return (
-    <div className="py-10 px-5 mb-6 sm:p-10 mx-auto w-5/6 sm:w-1/2 bg-slate-800 border-2 border-slate-700 rounded-lg">
+    <div className="py-10 px-5 mb-6 sm:p-10 mx-auto w-[90vw] lg:w-[60vw] 2xl:w-[45%] bg-slate-800 border-2 border-slate-700 rounded-lg">
       <QuizForm
         isLoading={loading || questionsLoading}
         questionSet={data?.questionById}