Merge pull request #73 from TyronNIKO/fixing

fixing about me
TyronNIKO · Jul 10, 2024 · 8286fbe · 8286fbe
2 parents e39bcde + cfd6c9f
commit 8286fbe
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/css/about-me.css b/src/css/about-me.css
@@ -25,7 +25,7 @@
 .about-me .about-swiper .next .arrow{--color:#3b3b3b;opacity:1}
 .about-me .about-swiper .next.swiper-button-lock {cursor: not-allowed;}
 .about-me .about-swiper .swiper-slide{width:fit-content;height:100%}
-.about-me .about-swiper .swiper-slide .btn{display:flex;justify-content:center;align-items:center;width:130px;max-width:100%;padding:0}
+.about-me .about-swiper .swiper-slide .btn{display:flex;justify-content:center;align-items:center;width:32.4vw;max-width:130px;padding:0}
 .about-me .about-swiper .swiper-slide.swiper-slide-active .btn{background:rgba(var(--color-red), 1)}
 /* media */
 @media only screen and (min-width: 768px){
@@ -38,7 +38,7 @@
 .about-me .ac-text{width:auto}
 /* swiper */
 .about-me .about-swiper{--offset:104px}
-.about-me .about-swiper .swiper-slide .btn{width:200px}
+.about-me .about-swiper .swiper-slide .btn{width:200px;max-width:100%}
 }
 @media only screen and (min-width: 1440px){
 .about-me{padding-top:96px}

diff --git a/src/css/hero.css b/src/css/hero.css
@@ -2,10 +2,13 @@
 .hero-container{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:16px 0;}
 .hero-page-title{margin:auto;color:rgba(var(--color-white),1);font-weight:500;font-size:50px;line-height:1;letter-spacing:-0.08em;text-transform:uppercase}
 .hero-contact{display:flex;gap:4px;justify-content:space-between;align-items:center}
-.hero-social-list{display:flex;gap:4px;justify-content:space-between;align-items:center}
+.hero-social-list{display:flex;flex-wrap: wrap;gap:4px;justify-content:center;align-items:center;}
 .hero-social-list-link{display:flex;justify-content:center;align-items:center;width:37px;height:37px;padding:unset}
 .hero-contact-mail{display:flex;justify-content:center;align-items:center;padding:10px 12px}
 .hero-contact a{font-size:14px;line-height:1;letter-spacing:-0.02em}
+@media only screen and (min-width: 375px){
+    .hero-social-list{justify-content:space-between;}
+}
 @media only screen and (min-width: 768px){
     .section-hero { min-height: 1024px;}
 .hero-contact a{font-size:16px;}