fix responsivity issue 2nd scorll

TEDxNTUA · Mar 1, 2024 · 49cee11 · 49cee11
1 parent bb88b87
commit 49cee11
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/src/components/MainPage/2ndScroll.js b/src/components/MainPage/2ndScroll.js
@@ -4,9 +4,9 @@ import Image from "next/image";
 
 function SecondScroll() {
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-col-3 justify-items-center bg-black">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-col-3 justify-items-center bg-black mb-2">
       <div className="flex flex-col items-center md:items-left justify-center w-8/12 lg:w-5/12 my-4 md:my-8">
-        <h1 className="text-2xl hover:text-our-red text-left font-extrabold text-white leading-tight">
+        <h1 className="hidden mb:block text-2xl hover:text-our-red text-left font-extrabold text-white leading-tight">
           About the
         </h1>
 

diff --git a/src/components/SocialMedia/SocialMediaItem.js b/src/components/SocialMedia/SocialMediaItem.js
@@ -9,7 +9,7 @@ function SocialMediaItem({ iconName, link, color, hoverColor }) {
     <a
       href={link}
       target="_blank"
-      className="max-w-[60%] sm:max-w-[40%] md:max-w-[60%] inline-block"
+      className="max-w-[50%] sm:max-w-[30%] md:max-w-[60%] inline-block"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >