Merge pull request #5659 from iamclintgeorge/bug/5645

Fixed #5645 {Improve Mobile-Friendliness of "Learn Cloud Native" Section}
layer5io · Aug 29, 2024 · 9d8fb13 · 9d8fb13
2 parents cf601ba + 4542d38
commit 9d8fb13
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 13 deletions.
diff --git a/src/sections/Learn/LearnPage-Sections/books.js b/src/sections/Learn/LearnPage-Sections/books.js
@@ -9,27 +9,25 @@ import styled from "styled-components";
 const BooksListWrapper = styled.div`
     Button:hover {
       box-shadow: 0 2px 10px ${props => props.theme.whiteFourToBlackFour};
-
     }
     .book-heading {
         text-align: center;
-        margin: 5rem 0
+        margin: 2.5rem 5vw;
         color: ${props => props.theme.text};
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
     }
     .books-card {
         display: flex;
-        margin: 1rem auto;
+        margin: 1rem auto 2rem auto;
+        padding: 1rem 0;
         min-height: 15.5rem;
         max-width: 50.5rem;
         transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
-
         .books-image {
             height: 12rem;
             margin: auto;
             text-align: center;
             filter: brightness(0.9);
-
             img {
                 max-width: 18rem;
                 height: inherit;
@@ -69,12 +67,10 @@ const BooksListWrapper = styled.div`
             }
         }
     }
-
     .see-more-button {
         margin: 4rem 0 0;
         text-align: center;
       }
-
     @media screen and (max-width: 600px) {
         .books-card {
             display: block;
@@ -158,5 +154,4 @@ const BooksSection = () => {
     </BooksListWrapper>
   );
 };
-
-export default BooksSection;
+export default BooksSection;
diff --git a/src/sections/Learn/learnpage.style.js b/src/sections/Learn/learnpage.style.js
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const LearnPageWrapper = styled.div`
     .page-header-section {
-        height: 35rem;
+        height: 20rem;
         text-align: center;
         background: rgb(71,126,150);
         background: linear-gradient(250deg, rgba(71,126,150,1) 0%, rgba(0,179,159,1) 35%, rgba(60,73,79,1) 100%);
@@ -12,11 +12,15 @@ export const LearnPageWrapper = styled.div`
         justify-content: center;
         h1 {            
             color: white;
+            margin-left: 5vw;
+            margin-right: 5vw;
         }
         h3 {
             margin-top: 1rem;
             margin-left: 5rem;
             margin-right: 5rem;
+            padding-left: 1.2rem;
+            padding-right: 1.2rem;
             color: white;
             font-size: 1.5rem;
             font-weight: 300;
@@ -27,19 +31,16 @@ export const LearnPageWrapper = styled.div`
             }
           }
     }
-
     .join-community{
         width: 100%;
         max-width: 100%;
         height: 28rem;
         background-position: bottom;
-
         @media screen and (min-width: 1800px) {
             height: 34rem;
             background-position-y: -56vw;
         }
     }
-
     .join-community_text-and_button{
         p{
             max-width: 22rem;