Improve responsiveness

dwh-outsite · Apr 8, 2023 · 025b93b · 025b93b
1 parent 0442f89
commit 025b93b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 7 deletions.
diff --git a/components/Home/EatingOut.vue b/components/Home/EatingOut.vue
@@ -23,8 +23,10 @@ nl:
           class="flex-1 h-80 py-8 px-4 md:pr-40 background text-white text-shadow flex flex-col justify-center items-end"
         >
           <div>
-            <div class="backdrop-blur-lg bg-white bg-opacity-25 shadow rounded-full flex space-x-6 items-center">
-              <div class="rounded-full w-20 h-20 p-6 bg-brand-450 text-white mx-auto">
+            <div
+              class="backdrop-blur-md bg-white bg-opacity-25 shadow rounded-xl md:rounded-full flex space-x-6 items-center"
+            >
+              <div class="hidden md:block rounded-full w-20 md:h-20 p-6 bg-brand-450 text-white mx-auto">
                 <Zondicon icon="location-food" class="fill-current" />
               </div>
               <div class="pr-6">

diff --git a/sites/dwhdelft.nl/pages/index.vue b/sites/dwhdelft.nl/pages/index.vue
@@ -41,12 +41,12 @@ nl:
         class="text-2xl text-white mt-2 font-light md:w-2/3 lg:w-1/2 [text-shadow:0_2px_4px_rgba(0,0,0,0.35)]"
         v-text="$t('hero.subtitle')"
       />
-      <div class="mt-8 flex">
-        <a href="#join-dwh">
-          <button class="block button-pink" v-text="$t('hero.leftButton')" />
+      <div class="mt-8 md:flex space-y-4 md:space-y-0 md:space-x-4">
+        <a href="#join-dwh" class="block">
+          <button class="button-pink" v-text="$t('hero.leftButton')" />
         </a>
-        <a href="#recurring_events">
-          <button class="block ml-4 button-white" v-text="$t('hero.rightButton')" />
+        <a href="#recurring_events" class="block">
+          <button class="button-white" v-text="$t('hero.rightButton')" />
         </a>
       </div>
     </Header>