fix: rwd

Author: thomkrupa

components/wizard/RecapBar.js

@@ -126,8 +126,8 @@ export default function RecapBar({ data, setData, onClickNext }) {
 
   return (
     <div className="font-sans fixed bottom-4 z-index-10 w-full max-w-[56rem] left-2/4 transform -translate-x-2/4 ">
-      <div className="flex justify-around bg-white dark:bg-black dark:bg-opacity-30 backdrop-blur-lg bg-opacity-30 px-6 py-4 rounded-xl border border-gray-200 dark:border-white dark:border-opacity-10 shadow-xl">
-        <div className="mr-6">
+      <div className="flex flex-wrap lg:justify-around bg-white dark:bg-black dark:bg-opacity-30 backdrop-blur-lg bg-opacity-30 px-6 pt-4 rounded-xl border border-gray-200 dark:border-white dark:border-opacity-10 shadow-xl">
+        <div className="mr-6 mb-4">
           <p className="uppercase mb-2 text-gray-700 font-bold dark:text-white dark:opacity-60">
             Content
           </p>
@@ -140,7 +140,7 @@ export default function RecapBar({ data, setData, onClickNext }) {
             Edit Content
           </WizardButton>
         </div>
-        <div className="mr-6 flex flex-col">
+        <div className="mr-6 flex flex-col mb-4">
           <p className="uppercase mb-2 text-gray-700 font-bold dark:text-white dark:opacity-60">
             Theme
           </p>
@@ -151,23 +151,23 @@ export default function RecapBar({ data, setData, onClickNext }) {
             withBackground
           />
         </div>
-        <div className="mr-6">
+        <div className="mr-6 mb-4">
           <WizardLabel>Headings</WizardLabel>
           <FontSwitcher
             cssVariable="--font-primary"
             data={data}
             setData={setData}
           />
         </div>
-        <div className="mr-6">
+        <div className="mr-6 mb-4">
           <WizardLabel>Paragraphs</WizardLabel>
           <FontSwitcher
             cssVariable="--font-secondary"
             data={data}
             setData={setData}
           />
         </div>
-        <div className="mt-auto">
+        <div className="mt-auto mb-4">
           <WizardButton
             as="a"
             href={deployUrl}

components/wizard/elements.js

@@ -12,7 +12,7 @@ export const NetlifyLogo = ({ className }) => (
 );
 
 export const WizardTitle = ({ children }) => (
-  <h2 className="mb-8 text-5xl">{children}</h2>
+  <h2 className="mb-8 text-3xl lg:text-5xl">{children}</h2>
 );
 
 export const WizardProgressBar = ({ value }) => {
@@ -32,7 +32,7 @@ export const WizardContent = ({ children, step }) => (
     <div className="flex justify-center mt-20 w-12 mx-auto">
       <NetlifyLogo className="text-black dark:text-white" />
     </div>
-    <div className="py-12 pt-12 pb-20 max-w-2xl mx-auto">{children}</div>
+    <div className="py-12 px-4 pt-12 pb-20 max-w-2xl mx-auto">{children}</div>
   </div>
 );
 

components/wizard/index.js

@@ -26,7 +26,6 @@ export default function Wizard(props) {
   }, [router.query.step]);
 
   useEffect(() => {
-    console.log({ step });
     if (step >= 4) {
       setData((prevData) => ({ ...prevData, isDone: true }));
     } else {
@@ -61,7 +60,7 @@ export default function Wizard(props) {
         title="Create new blog"
         description="Use this simple wizard to create a new blog. Based on Next.js, Tailwind 3.0 and MDX. Deploy straight to Netlify."
       />
-      <div className="w-full h-full min-h-screen flex flex-col items-center justify-center">
+      <div className="w-full h-full min-h-screen flex flex-col items-center justify-center px-4">
         <Step
           onClickNext={onClickNext}
           onClickBack={onClickBack}