fixed ui mobile

Vizzuality · Apr 17, 2024 · 62b8099 · 62b8099
1 parent 0d53267
commit 62b8099
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/marketing/src/containers/blog-posts/component.tsx b/marketing/src/containers/blog-posts/component.tsx
@@ -60,11 +60,14 @@ const BlogPosts: FC = () => {
                         setSlide(i);
                       }}
                       className={cx({
-                        'relative w-28 h-0.5 border border-white/20': true,
+                        'relative w-full lg:w-28 h-0.5 border border-white/20': true,
                       })}
+                      style={{
+                        maxWidth: `${100 / posts?.length}%`,
+                      }}
                     >
                       {slide === i && (
-                        <div className="absolute w-28 h-0.5 transform -translate-y-1/2 bg-orange-500" />
+                        <div className="absolute w-full h-0.5 transform -translate-y-1/2 bg-orange-500" />
                       )}
                     </button>
                   );

diff --git a/marketing/src/containers/contact/component.tsx b/marketing/src/containers/contact/component.tsx
@@ -256,8 +256,8 @@ const Contact: React.FC = () => {
               </div>
 
               {/* <div className="flex flex-col items-center justify-between space-y-10 md:flex-row md:space-x-10 md:space-y-0"> */}
-              <div className="grid grid-cols-3 gap-3">
-                <div className="col-span-2">
+              <div className="grid grid-cols-1 lg:grid-cols-3 gap-3">
+                <div className="lg:col-span-2">
                   <div className="flex items-center space-x-2.5">
                     <input
                       id="terms"
@@ -292,7 +292,7 @@ const Contact: React.FC = () => {
                   </div>
                 </div>
 
-                <div className="justify-self-end">
+                <div className="lg:justify-self-end">
                   <button
                     type="submit"
                     className="py-8 px-10 max-h-44 font-semibold text-black bg-transparent border-2 border-black hover:bg-black/10"

diff --git a/marketing/src/containers/home/developed/component.tsx b/marketing/src/containers/home/developed/component.tsx
@@ -35,7 +35,7 @@ const Developed: React.FC = () => {
           </FadeIn>
 
           <FadeIn>
-            <div className="grid grid-cols-5 gap-x-20 gap-y-14 items-center">
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-x-20 gap-y-14 items-center">
               <div>
                 <a href="https://www.google.com/" target="_blank" rel="noreferrer noopener">
                   <Image