From 744eab85414fd59924855883ac50b2c544d9599c Mon Sep 17 00:00:00 2001
From: Fran <fran@xyvs.io>
Date: Tue, 16 Jan 2024 11:02:06 -0500
Subject: [PATCH] fix: Responsive design

---
 src/components/About.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/About.vue b/src/components/About.vue
index 4fef514..0502557 100644
--- a/src/components/About.vue
+++ b/src/components/About.vue
@@ -15,11 +15,11 @@ import Footer from './Footer.vue'
 
             </div>
 
-            <div class="space-y-4">
+            <div class="space-y-4 px-6">
 
                 <p>Here are a couple of popular pokemons:</p>
 
-                <ul class="flex items-center gap-2 text-sm">
+                <ul class="flex flex-wrap justify-center items-center gap-2 text-sm">
 
                     <li class="bg-teal-800 hover:bg-teal-700 text-teal-100 rounded px-2 py-1">
                         <a href="/pokemon/1">Bulbasaur</a>