Merge pull request #56 from The-Never-Ending-Story/fix/sept-responsiv…

…e-review Fix/sept responsive review
The-Never-Ending-Story · Sep 22, 2023 · 25ec1bd · 25ec1bd
2 parents 3f80294 + f1975f3
commit 25ec1bd
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 21 deletions.
diff --git a/src/Components/About/About.css b/src/Components/About/About.css
@@ -63,3 +63,13 @@
   border-radius: 15px;
   box-shadow: 2px 3px 40px 15px rgba(20, 213, 133, .4);
 }
+
+@media(max-width: 800px) {
+  .about-image {
+    display: none;
+  }
+
+  .about-info {
+    width: 75%;
+  }
+}
diff --git a/src/Components/About/About.js b/src/Components/About/About.js
@@ -19,7 +19,7 @@ export const About = ({ discoverNewWorld }) => {
           <button className="about-button" onClick={() => { discoverNewWorld() }}>Discover</button>
         </div>
       </section>
-      <img className='about-image' src={aboutImage}/>
+      <img className='about-image' src={aboutImage} alt='etheral woman, Hyper Looms mascot'/>
     </section>
   )
 }
diff --git a/src/Components/Detail/Detail.js b/src/Components/Detail/Detail.js
@@ -38,7 +38,7 @@ export const Detail = ({ item, additionalDetails }) => {
     <div className="single-det-wrapper" key={id}>
       {windowWidth > 1200 && (
         <div className="single-det-container">
-          <img className="single-det-img" src={img} alt={imgAlt} />
+          <img className="single-det-img" src={img} alt={name || 'world detail'} />
           <div className="single-det-text-wrapper">
             <h3>{name}</h3>
             {additionalDetails && additionalDetails.map((detail, index) => (

diff --git a/src/Components/Detail/Details.css b/src/Components/Detail/Details.css
@@ -100,3 +100,9 @@
    width: 100%;
   }
 }
+
+@media(max-width: 800px) {
+  .single-det-img {
+    max-width: 90vw;
+  }
+}
diff --git a/src/Components/Footer/Footer.css b/src/Components/Footer/Footer.css
@@ -7,8 +7,7 @@
 }
 
 .team-container{
-  width: 800px;
-  height: 400px;
+  width: 85vw;
   background-color:rgba(255, 255, 255, 0.1);
   border-radius: 15px;
   box-shadow: 2px 3px 40px 15px rgba(20, 213, 133, .4);
@@ -25,7 +24,7 @@
 }
 
 .front-end-container, .back-end-container{
-  width: 30%;
+  width: 35%;
 }
 
 .dev-container{
@@ -36,4 +35,11 @@
 a {
   color: rgb(185, 215, 181);
   text-decoration: none;
+}
+
+@media(max-width: 800px) {
+  .dev-container {
+    height:22%;
+    flex-direction: column;
+  }
 }
diff --git a/src/Components/HeroImageSlider/HeroImageSlider.css b/src/Components/HeroImageSlider/HeroImageSlider.css
@@ -16,16 +16,4 @@
   background-size: cover; 
   background-position: center;
   overflow: hidden;
-}
-
-
-/* 
-.my-hero {
-  position: relative;
-  background-repeat: no-repeat;
-  background-size: contain;
-  z-index: -2;
-  width: 100vw;
-  height: 100vh;
-} */
-
+}
diff --git a/src/Components/HeroImageSlider/HeroImageSlider.js b/src/Components/HeroImageSlider/HeroImageSlider.js
@@ -30,7 +30,7 @@ export const HeroImageSlider = () => {
     return <Error />
   } else if (slides.length > 0) {
     return (
-      <div className='slider-container'>
+      <div className='slider-container' >
         {slides.map((slide, i) => {
           return (
             <div 

diff --git a/src/Components/HeroText/HeroText.css b/src/Components/HeroText/HeroText.css
@@ -104,4 +104,24 @@
     font-size: 150%;
     position: absolute;
   }
+}
+
+@media(max-width: 800px) {
+  .introducing {
+    font-size: 22px;
+  }
+
+  .hero-title {
+    font-size: 70%;
+  }
+
+  .tag-text {
+    font-size: 100%;
+  }
+
+  .keyframe-arrow {
+    bottom: 12%;
+    right: 15%;
+    scale: 3;
+  }
 }
diff --git a/src/Components/PreviewComponents/CarouselPreview/CarouselPreview.css b/src/Components/PreviewComponents/CarouselPreview/CarouselPreview.css
@@ -131,14 +131,25 @@
     font-size: 2rem;
   }
 }
+
 @media (max-width: 780px) {
+  .carousel-btn {
+    scale: .8;
+  }
   .carousel-wrapper {
     width: 85%;
   }
   .carousel-preview-container {
     width: 41%;
   }
+  .prev-button {
+    left: 1.15rem;
+  }
+  .next-button {
+    right: -1.85rem;
+  }
 }
+
 @media (max-width: 600px) {
   .carousel-wrapper {
     width: 70%;

diff --git a/src/Components/PreviewComponents/GridPreview/Grid.js b/src/Components/PreviewComponents/GridPreview/Grid.js
@@ -48,10 +48,11 @@ export const Grid = ({routeToWorld}) => {
 
   const gridPreviews = worlds
                         .slice(0, numberToDisplay)
-                        .map(world =>
+                        .map((world, index)=>
                           <GridPreview 
                             world={world}
                             routeToWorld={routeToWorld}
+                            key={index}
                           />
                         );
 

diff --git a/src/Components/PreviewComponents/MainPreview/MainPreview.css b/src/Components/PreviewComponents/MainPreview/MainPreview.css
@@ -69,4 +69,13 @@
 .main-prev:hover, .main-next:hover {
   color: rgb(20, 213, 133);
   border: rgb(20, 213, 133) 1px solid;
+}
+
+@media(max-width: 800px) {
+  .main-prev{
+    left: 4rem;
+  }
+  .main-next{
+    right: -1rem;
+  }
 }
diff --git a/src/Components/SingleWorld/SingleWorld.css b/src/Components/SingleWorld/SingleWorld.css
@@ -34,7 +34,6 @@
   position: absolute;
   background-color: rgba(101, 99, 99, 0.6);
   padding: 0 20px;
-  min-width: 28rem;
   max-width: 45rem;
   display: flex;
   flex-direction: column;
@@ -152,4 +151,19 @@ p.lvl-detail{
   .single-world-view h1 {
     font-size: 3.25rem;
   }
+}
+
+@media(max-width: 800px) {
+
+  .single-world-view {
+    width: 100vw;
+  }
+  .single-world-view p {
+    font-size: .9rem;
+  }
+  .single-top-wrapper {
+    min-width: 0rem;
+    width: 90%;
+    padding-left: 0rem;
+  }
 }
diff --git a/src/Components/SingleWorld/SingleWorld.js b/src/Components/SingleWorld/SingleWorld.js
@@ -75,6 +75,7 @@ export const SingleWorld = () => {
     let additionalDetails;
 
     return category.map(item => {
+      console.log(item)
       switch (category) {
         case world.species:
           additionalDetails = [