Add responsiveness to preview cards in events page (#187)

* refactor: minor ui update * feat: add modals for terms&conditions and code of conduct * refactor: add responivesness to events card in events page
dscnitrourkela · Oct 20, 2024 · ecf95b5 · ecf95b5
1 parent 6d3e510
commit ecf95b5
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/components/EventsPage/CardComponents/DetailsCard/DetailsCard.jsx b/src/components/EventsPage/CardComponents/DetailsCard/DetailsCard.jsx
@@ -25,12 +25,13 @@ function DetailsCard({ ImageURL, Heading, Description, Location, Date, Time, Pri
       </DescriptionCardContainer>
       <div className='max-w-[1550px] w-[100%] pl-2 pr-2 xxs:pl-4 xxs:pr-4 2xs:pl-8 2xs:pr-8 xsm:pl-12 xsm:pr-12 ssm:pl-16 ssm:pr-16 sm:pl-24 sm:pr-24'>
         <DescriptionCardBottom>
-          <div className='flex gap-2 items-center '>
+          <div className='flex gap-2 items-center'>
             <Image
               src='https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729309788/352521_location_on_icon_u8d6am.png'
               alt='img'
               width={60}
               height={60}
+              className='w-8 h-8 sm:w-14 sm:h-14 md:w-[60px] md:h-[60px]'
             />
             <div className='font-bold'>{Location} </div>
           </div>
@@ -40,6 +41,7 @@ function DetailsCard({ ImageURL, Heading, Description, Location, Date, Time, Pri
               alt='img'
               width={60}
               height={60}
+              className='w-8 h-8 sm:w-14 sm:h-14 md:w-[60px] md:h-[60px]'
             />
             <div className='font-bold'>{Prizes} </div>
           </div>
@@ -49,7 +51,7 @@ function DetailsCard({ ImageURL, Heading, Description, Location, Date, Time, Pri
               alt='img'
               width={60}
               height={60}
-              className='w-[48px] h-[48px] xsm:w-[60px] xsm:h-[60px]'
+              className='w-8 h-8 sm:w-14 sm:h-14 md:w-[60px] md:h-[60px]'
             />
             <div className='flex flex-col '>
               <div className='font-bold'>{Date}</div>

diff --git a/src/components/EventsPage/CardComponents/PreviewCard/PreviewCard.jsx b/src/components/EventsPage/CardComponents/PreviewCard/PreviewCard.jsx
@@ -21,7 +21,7 @@ function PreviewCard({ ImageURL, PreviewDescription = '' }) {
         className='rounded-[17.82px] h-[170px] xxs:h-[180px] 2xs:h-[190px] xsm:h-[199px] ssm:h-[214px] sm:h-[235px] md:h-[260px] w-full md:w-[305px]  lg:w-[338px] lg:h-[240px] '
       />
       <PreviewCardContent>{truncatedDescription}</PreviewCardContent>
-      <div className='flex justify-center gap-24 mt-4'>
+      <div className='flex justify-center gap-10 sm:gap-24 mt-4'>
         {/* Reduced gap for symmetry */}
         <PreviewMoreInfoButton2>Rulebook</PreviewMoreInfoButton2>
         <PreviewMoreInfoButton>Register</PreviewMoreInfoButton>