fix: css square image

Mannan-Goyal · Sep 5, 2021 · 6bbc510 · 6bbc510
1 parent a28ada3
commit 6bbc510
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/src/components/EventProfile.jsx b/src/components/EventProfile.jsx
@@ -14,18 +14,18 @@ const EventProfile = ({img,org,title,desc,start,end,url,backgroundColor,textColo
     <div className="w-full">
       <div className="flex flex-col">
         <div
-          className="border border-gray-900 text-center sm:text-left p-2 mr-2 mb-2 mt-2 w-full h-full  sm:h-52 flex-col sm:flex-row"
+          className="border border-gray-900 align-center text-left p-2 mr-2 mb-2 mt-2 w-full h-full  sm:h-56 flex-col sm:flex-row"
           style={{ backgroundColor,borderRadius:"8px",display:"flex",}}
         >
-          <div className="w-full h-44 sm:h-38 my-2 md:w-1/5 flex items-center justify-center">
+          <div className="h-80 w-80 self-center sm:w-48 sm:h-48 my-2 flex items-center justify-center imgdiv">
             <img src={img}
                 alt={org}
-                className="object-contain rounded self-center w-full h-full"
+                className="object-cover rounded self-center w-full h-full"
             />
             </div>
-          <div id="eventprofilecard" className="flex-none sm:flex sm:w-4/5" style={{overflowY:todayChecker?"auto":"none",overflowX:"hidden"}}>
-            <div className="flex-auto w-full p-2 sm:ml-5 justify-evenly">
-              <div className="flex items-center justify-center sm:justify-between sm:mt-2">
+          <div id="eventprofilecard" className="flex-none sm:flex w-full sm:w-4/5" style={{overflowY:todayChecker?"auto":"none",overflowX:"hidden"}}>
+            <div className="flex-auto w-full p-2 sm:ml-2 justify-evenly">
+              <div className="flex items-start sm:justify-between sm:mt-2">
                 <div className="flex items-center">
                   <div className="flex flex-col">
                     <div

diff --git a/src/index.css b/src/index.css
@@ -44,4 +44,15 @@
   .eventprofile {
     width: 90vw;
   }
+  .imgdiv{
+    height:85vw !important;
+    width:85vw !important;
+  }
 }
+@media (max-width: 520px) {
+  .imgdiv{
+    height:70vw !important;
+    width:70vw !important;
+  }
+} 
+
diff --git a/src/pages/Eventform/index.jsx b/src/pages/Eventform/index.jsx
@@ -144,10 +144,10 @@ const EventForm = () => {
                           name="desc"
                           id="scroll-bar"
                           className="description w-full px-4 pt-4 resize:none"
-                          maxLength="300"
+                          maxLength="500"
                           onChange={(e) => setDesc(e.target.value)}
                         />
-                        <h2 className="text-white text-right">{`${desc.length}/300`}</h2>
+                        <h2 className="text-white text-right">{`${desc.length}/500`}</h2>
                       </div>
                     </div>
 

diff --git a/src/validation/eventform.jsx b/src/validation/eventform.jsx
@@ -4,7 +4,7 @@ const eventFormSchema = Joi.object({
     title: Joi.string().min(3).max(70).required().label("Event Title").error(new Error('Title should be of min 3 max 70')),
     cname:Joi.string().min(3).max(70).required().label("Coordinator's name").error(new Error('Coordinator name should be of min 3 max 70')),
     email: Joi.string().email({ tlds: {allow: false} }).lowercase().required().error(new Error('Invalid Email')),
-    desc: Joi.string().max(300).required().error(new Error('Description max reached')),
+    desc: Joi.string().max(500).required().error(new Error('Description max reached')),
     start: Joi.date().error(new Error('Start date must be lower than end date')),
     end: Joi.date().min(Joi.ref('start')).error(new Error('End date must be greater than start date')),
     url:Joi.string().error(new Error('Invalid URL')),