Add padding on mobile

src/components/AlgoliaSearch/MobileSearch.component.tsx

@@ -15,8 +15,8 @@ const searchClient = algoliasearch(
 const MobileSearch = () => {
   const [search, setSearch] = useState<string | null>(null);
   const [hasFocus, sethasFocus] = useState<boolean>(false);
-  return ( 
-    <div className="inline mt-4 md:hidden px-1">
+  return (
+    <div className="inline mt-4 md:hidden">
       <InstantSearch
         indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME ?? 'changeme'}
         searchClient={searchClient}

src/components/Footer/Footer.component.tsx

@@ -5,7 +5,7 @@
  */
 const Footer = () => (
   <footer className="w-full bg-white border-t border-gray-200 mt-12">
-    <div className="container mx-auto px-6 px-1">
+    <div className="container mx-auto px-6">
       <div className="py-4">
         <div className="text-gray-600 text-center">
           &copy; {new Date().getFullYear()} Daniel / w3bdesign

src/components/Footer/Stickynav.component.tsx

@@ -11,7 +11,7 @@ import Hamburger from './Hamburger.component';
  * Includes mobile menu.
  */
 const Stickynav = () => (
-  <nav id="footer" className="fixed bottom-0 z-50 w-full mt-[10rem] md:hidden px-1">
+  <nav id="footer" className="fixed bottom-0 z-50 w-full mt-[10rem] md:hidden">
     <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 bg-blue-800">
       <Hamburger />
       <div

src/components/Header/Header.component.tsx

@@ -25,7 +25,7 @@ const Header = ({ title }: IHeaderProps) => (
         key="pagetitle"
       />
     </Head>
-    <div className="container mx-auto px-6 px-1">
+    <div className="container mx-auto px-6">
       <Navbar />
     </div>
   </>

src/components/Layout/Layout.component.tsx

@@ -1,3 +1,4 @@
+// Imports
 import { ReactNode, useContext, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 
@@ -55,10 +56,10 @@ const Layout = ({ children, title }: ILayoutProps) => {
   }, [refetch]);
 
   return (
-    <div className="flex flex-col min-h-screen w-full mx-auto px-1">
+    <div className="flex flex-col min-h-screen w-full mx-auto">
       <Header title={title} />
       {title === 'Hjem' ? (
-        <main className="flex-1">{children}</main>
+        <main className="flex-1 px-4 md:px-0">{children}</main>
       ) : (
         <div className="container mx-auto px-6 flex-1">
           <PageTitle title={title} />

src/pages/index.tsx

@@ -1,3 +1,4 @@
+// Components
 import Hero from '@/components/Index/Hero.component';
 import DisplayProducts from '@/components/Product/DisplayProducts.component';
 import Layout from '@/components/Layout/Layout.component';
@@ -22,10 +23,8 @@ const Index: NextPage = ({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout title="Hjem">
-    <div className="px-1">
-      <Hero />
-      {products && <DisplayProducts products={products} />}
-    </div>
+    <Hero />
+    {products && <DisplayProducts products={products} />}
   </Layout>
 );
 

src/pages/kasse.tsx

@@ -1,11 +1,13 @@
+// Components
 import Layout from '@/components/Layout/Layout.component';
 import CheckoutForm from '@/components/Checkout/CheckoutForm.component';
 
+// Types
+import type { NextPage } from 'next';
+
 const Kasse: NextPage = () => (
   <Layout title="Kasse">
-    <div className="px-1">
-      <CheckoutForm />
-    </div>
+    <CheckoutForm />
   </Layout>
 );
 

src/pages/produkter.tsx

@@ -1,3 +1,4 @@
+// Components
 import DisplayProducts from '@/components/Product/DisplayProducts.component';
 import Layout from '@/components/Layout/Layout.component';
 
@@ -21,9 +22,7 @@ const Produkter: NextPage = ({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout title="Produkter">
-    <div className="px-1">
-      {products && <DisplayProducts products={products} />}
-    </div>
+    {products && <DisplayProducts products={products} />}
   </Layout>
 );