Make Doctor Detail Page Responsive

Atril33 · Sep 29, 2023 · f415063 · f415063
1 parent 40a3eec
commit f415063
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/src/routes/DoctorDetails.jsx b/src/routes/DoctorDetails.jsx
@@ -14,12 +14,12 @@ const DoctorDetails = () => {
     <>
       <div className="flex w-full h-auto">
         <Sidebar />
-        <div className="flex w-full h-auto justify-around">
-          <div className="flex w-3/5 h-screen items-center justify-center">
-            <img src="https://t3.ftcdn.net/jpg/02/60/04/08/360_F_260040863_fYxB1SnrzgJ9AOkcT0hoe7IEFtsPiHAD.jpg" className="w-3/4 rounded-md" alt={doctor.name} />
+        <div className="flex w-full h-auto justify-around max-[1000px]:flex-col max-[1000px]:items-center">
+          <div className="flex w-3/5 h-screen items-center justify-center max-[1000px]:w-ful">
+            <img src="https://t3.ftcdn.net/jpg/02/60/04/08/360_F_260040863_fYxB1SnrzgJ9AOkcT0hoe7IEFtsPiHAD.jpg" className="w-3/4 rounded-md max-[1000px]:w-full" alt={doctor.name} />
           </div>
-          <div className="flex w-1/4 pb-5 pt-5 flex-col">
-            <div className="flex w-full h-20 flex-col items-end mt-20">
+          <div className="flex w-1/4 pb-5 pt-5 flex-col max-[1000px]:w-4/5 max-[1000px]:-mt-24">
+            <div className="flex w-full h-20 flex-col items-end mt-20 max-[1000px]:items-center max-[1000px]:mt-1">
               <h3 className="text-3xl font-semibold uppercase tracking-wide font-serif">
                 {' Dr. '}
                 {doctor.name.trim()}
@@ -49,7 +49,7 @@ const DoctorDetails = () => {
                 <h3>{doctor.time_available_to}</h3>
               </div>
             </div>
-            <div className="flex w-auto h-auto bg-[#4ecca3] p-3.5 my-6 items-center justify-between rounded-[30px] cursor-pointer">
+            <div className="flex w-auto h-auto bg-[#4ecca3] p-3.5 my-6 items-center justify-between rounded-[30px] cursor-pointer max-[1000px]:p-2">
               <img src={settingIcon} alt="Setting Icon" className="w-9" />
               <h3 className="text-[#fff] font-semibold">Schedule Appointment</h3>
               <img src={nextArrowIcon} alt="Next Arrow Icon" className="w-6" />

diff --git a/src/routes/Sidebar.jsx b/src/routes/Sidebar.jsx
@@ -15,7 +15,7 @@ const Sidebar = () => {
 
   return (
     <>
-      <div className="lg:hidden p-4">
+      <div className="lg:hidden p-4 max-[768px]:absolute">
         <button
           type="button"
           className="p-2 text-black hover:text-green-400"