fix Homepage spacing on desktop browsers

kelvinlockwood · Jun 11, 2021 · 15b92d1 · 15b92d1
1 parent c935b03
commit 15b92d1
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/public/images/home/bx-chevron-down.svg b/public/images/home/bx-chevron-down.svg
diff --git a/src/index.njk b/src/index.njk
@@ -5,14 +5,14 @@
 {% block body %}
   <main>
     <section class="text-gray-400 bg-mydark-500 body-font mb-32">
-      <div class="container max-w-59rem mx-auto flex mt-10 px-0 py-24 md:flex-row flex-col items-center">
-        <div class="lg:flex-grow lg:pr-16 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
+      <div class="container md:px-5 max-w-59rem mx-auto flex mt-10 px-0 py-24 md:flex-row flex-col items-center">
+        <div class="lg:flex-grow lg:pr-16 md:pr-16 flex flex-col md:items-start text-left mb-16 md:mb-0">
           <h1 class="title-font w-full px-10 lg:px-0 md:px-0 sm:text-3xl text-xl mb-4 font-extrabold text-white">
             I'm Kelvin Lockwood, a non-technical startup founder and digital all-rounder working on products, subscription services and
             marketplaces.
           </h1>
           <a href="/work">
-            <div class="flex items-center py-2">
+            <div class="flex items-center py-2 px-10 md:px-0">
               <small class="mx-1 text-myred-500 font-semibold">Check out my work</small>
               <img class="text-myred-500 w-4" src="/images/home/bx-chevron-down.svg" alt="chevron-down"/>
             </div>
@@ -24,11 +24,11 @@
       </div>
     </section>
     <section class="w-full text-gray-300 text-opacity-90 bg-gradient-to-b from-mydark-500 via-mydark-100 to-mydark-500 body-font">
-      <div class="container py-24 px-10 lg:px-0 max-w-5xl mx-auto">
+      <div class="container pb-20 pt-16 px-10 lg:px-0 max-w-5xl mx-auto">
         <h1 class="sm:text-3xl text-2xl font-medium title-font mb-10 text-white">
           Here's how I can help you
         </h1>
-        <div class="flex flex-wrap -m-2  mb-20">
+        <div class="flex flex-wrap -m-2 mb-20 gap-y-10">
           {% for s in services %}
             <div class="p-2 lg:w-1/3 md:w-1/2 w-full">
               <div class="flex-grow text-left mt-6 sm:mt-0">