✨ feat: change css for docs/showcase

NitrogenZLab · Dec 20, 2024 · c31333a · c31333a
1 parent bd7cef4
commit c31333a
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/docs/docs/SHOWCASE/index.mdx b/docs/docs/SHOWCASE/index.mdx
@@ -24,7 +24,7 @@ List of used applications with `@baronha/react-native-multiple-image-picker`
         target="_blank"
         className="showcaseItem"
       >
-        <img src={item.banner} alt={item.title} />
+        <img src={item.banner} alt={item.title} className="showcaseBanner" />
         <b>{item.title}</b>
         <p className="showcaseTagline">{item?.tagline}</p>
       </a>

diff --git a/docs/docs/SHOWCASE/showcase.css b/docs/docs/SHOWCASE/showcase.css
@@ -2,7 +2,7 @@
   display: flex;
   /* justify-content: space-between; */
   flex-wrap: wrap;
-  gap: 24px;
+  gap: 20px;
 }
 
 .showcaseItem {
@@ -18,7 +18,6 @@
 
 .showcaseItem b {
   font-size: 1rem;
-
 }
 
 .showcaseItem .showcaseTagline {
@@ -30,6 +29,12 @@
   margin: 0;
 }
 
+.showcaseBanner {
+  width: 100%;
+  aspect-ratio: 16/9;
+  object-fit: cover;
+}
+
 @media (max-width: 768px) {
   .showcaseItem {
     flex: 100%;
@@ -40,23 +45,20 @@
 @media (min-width: 992px) {
   /* lg */
   .showcaseItem {
-
     max-width: 33.333%;
   }
 }
 
 @media (min-width: 1200px) {
   /* xl */
   .showcaseItem {
-
     max-width: 33.333%;
   }
 }
 
 @media (min-width: 1400px) {
   /* xxl */
   .showcaseItem {
-
     max-width: 33.333%;
   }
 }