From 21634470518a4049fd2df8d95678a87f4e01bc4d Mon Sep 17 00:00:00 2001
From: Harsh Bharvada <harsh07bharvada@gmail.com>
Date: Sun, 10 May 2020 08:37:10 +0530
Subject: [PATCH] Added responsiveness for Product with Overlapping Image Card

---
 .../UI/Cards/ProductCardWithPrice.vue          | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/UI/Cards/ProductCardWithPrice.vue b/src/components/UI/Cards/ProductCardWithPrice.vue
index 91a3fed..bb08867 100644
--- a/src/components/UI/Cards/ProductCardWithPrice.vue
+++ b/src/components/UI/Cards/ProductCardWithPrice.vue
@@ -1,18 +1,18 @@
 <template>
     <div :id="name | toId">
-        <div class="flex w-full h-full justify-center items-center">
-            <div class="flex flex-col w-2/5 h-auto justify-center items-center cursor-pointer">
+        <div class="flex flex-col max-w-sm mx-auto h-full justify-center items-center">
+           
                 <div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
-                     class="flex bg-gray-300 h-32 md:h-56 w-24 md:w-4/5 mx-2 rounded-sm shadow-md bg-cover bg-top">
+                     class="flex bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-top">
                 </div>
-                <div class="flex flex-col h-20 w-2/3 bg-white text-xs md:text-base -mt-10 text-center shadow-lg rounded-md justify-center items-center">
-                    <span class="flex w-full h-10 justify-center items-center font-bold ">Nike Revolt</span>
-                    <div class="flex flex-row w-full h-10 bg-gray-200 rounded-b-lg ">
-                        <span class="flex w-1/3 h-full rounded-bl-lg justify-center items-center md:font-black md:text-lg"> $150 </span>
-                        <div  class="flex w-2/3 h-full bg-indigo-700 rounded-br-lg text-white justify-center items-center ">Add to Cart</div>
+                <div class="flex flex-col h-20 w-48 md:w-64 bg-white -mt-10 text-sm shadow-lg rounded-lg justify-center items-center">
+                    <div class="flex w-full h-10 justify-center items-center font-bold uppercase tracking-wide">Nike Revolt</div>
+                    <div class="flex items-center justify-between w-full h-10 px-3 bg-gray-200 rounded-b-lg">
+                        <h1 class="text-gray-800 font-bold ">$129</h1>
+                        <button class=" bg-gray-700 text-xs text-white px-2 py-1 font-semibold rounded ">Add to cart</button>
                     </div>
                 </div>
-            </div>
+            
         </div>
         
     </div>