Merge pull request #72 from estartando-devs/fix/adjust-sections-width

Fix/set a new max-width to large screen
estartando-devs · Mar 8, 2022 · cd44a4c · cd44a4c
2 parents 85680a7 + 53068df
commit cd44a4c
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 43 deletions.
diff --git a/src/components/Courses/styles.ts b/src/components/Courses/styles.ts
@@ -7,13 +7,18 @@ type StyleProps = {
 
 export const CourseContainer = styled.section`
   width: 100%;
-  max-width: 1000px;
-  padding: 0 120px;
-  margin-top: 100px;
+  padding: 0 7.5rem;
+  margin-top: 6.25rem;
+  max-width: ${({ theme: { media } }) => media.desktop_fullhd};
+
   @media (max-width: ${({ theme: { media } }) => media.tablet_landscape}) {
     padding: 2rem 2rem 2.7rem;
     margin-top: 3rem;
   }
+
+  @media (min-width: ${({ theme: { media } }) => media.desktop_fullhd}) {
+    margin: 6.25rem auto 0;
+  }
 `;
 
 export const TitleContainer = styled.div<StyleProps>`

diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
@@ -15,21 +15,25 @@ export const ContainerHeader = styled.header`
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
-  padding: 0 7.5rem;
-
-  @media (max-width: ${({ theme: { media } }) => media.tablet_portrait}) {
-    padding: 0 1rem;
-  }
 `;
 
 export const SectionHeader = styled.section`
   display: flex;
   gap: 3rem;
+  max-width: ${({ theme: { media } }) => media.desktop_fullhd};
+  width: 100%;
+  padding: 0 7.5rem;
+
+  @media (min-width: ${({ theme: { media } }) => media.desktop_fullhd}) {
+    margin: 0 auto;
+    padding: 0 7.5rem;
+  }
 
   @media (max-width: ${({ theme: { media } }) => media.tablet_portrait}) {
     flex-direction: column;
     align-items: center;
     width: 100%;
+    padding: 0 2rem;
   }
 `;
 

diff --git a/src/components/SelectiveProcess/styles.ts b/src/components/SelectiveProcess/styles.ts
@@ -11,6 +11,11 @@ export const Section = styled.section`
   @media (max-width: ${({ theme: { media } }) => media.tablet}) {
     padding: 2.7rem 2rem;
   }
+
+  max-width: ${({ theme: { media } }) => media.desktop_fullhd};
+  @media (min-width: ${({ theme: { media } }) => media.desktop_fullhd}) {
+    margin: 4rem auto 0;
+  }
 `;
 
 export const Title = styled(Typography)`

diff --git a/src/components/StudentProfile/index.tsx b/src/components/StudentProfile/index.tsx
@@ -5,38 +5,36 @@ type StudentProfileProps = {
   title: string;
 };
 
-export const StudentProfile = ({ title }: StudentProfileProps) => {
-  return (
-    <S.Container>
-      <S.TextBox>
-        <S.TitleProfile dangerouslySetInnerHTML={{ __html: title }} />
-        <S.DescriptionProfile as="span">
-          Buscamos pessoas que gostem de desafios, sejam determinadas e
-          responsáveis. Nossa formação é totalmente <strong>gratuita.</strong> A
-          única coisa que cobramos é <strong>dedicação.</strong>
-          <br />
-          <br />
-          Para se inscrever você precisa: <br />
-          <br />
-          <ul>
-            <li>Estar cursando ou ter concluído o 3º ano do ensino médio;</li>
-            <li>
-              Morar <strong> em qualquer lugar do Brasil</strong>;
-            </li>
-            <li>
-              Possuir renda familiar per capta de{' '}
-              <strong> até meio salário mínimo </strong>(R$ 606,00 por pessoa
-              residente na casa) ou possuir renda familiar total de{' '}
-              <strong>até três salários mínimos</strong>;
-            </li>
-          </ul>
-          <br />
-          <br />É legal que você saiba usar mouse e teclado, pesquisar na
-          internet e ter bastante disposição para estudar. Ah, é importante ter
-          disponibilidade nas terças e quintas, de 19:30 às 21:30, pois esse
-          será o horário das aulas.
-        </S.DescriptionProfile>
-      </S.TextBox>
-    </S.Container>
-  );
-};
+export const StudentProfile = ({ title }: StudentProfileProps) => (
+  <S.Container>
+    <S.TextBox>
+      <S.TitleProfile dangerouslySetInnerHTML={{ __html: title }} />
+      <S.DescriptionProfile as="span">
+        Buscamos pessoas que gostem de desafios, sejam determinadas e
+        responsáveis. Nossa formação é totalmente <strong>gratuita.</strong> A
+        única coisa que cobramos é <strong>dedicação.</strong>
+        <br />
+        <br />
+        Para se inscrever você precisa: <br />
+        <br />
+        <ul>
+          <li>Estar cursando ou ter concluído o 3º ano do ensino médio;</li>
+          <li>
+            Morar <strong> em qualquer lugar do Brasil</strong>;
+          </li>
+          <li>
+            Possuir renda familiar per capta de{' '}
+            <strong> até meio salário mínimo </strong>(R$ 606,00 por pessoa
+            residente na casa) ou possuir renda familiar total de{' '}
+            <strong>até três salários mínimos</strong>;
+          </li>
+        </ul>
+        <br />
+        <br />É legal que você saiba usar mouse e teclado, pesquisar na internet
+        e ter bastante disposição para estudar. Ah, é importante ter
+        disponibilidade nas terças e quintas, de 19:30 às 21:30, pois esse será
+        o horário das aulas.
+      </S.DescriptionProfile>
+    </S.TextBox>
+  </S.Container>
+);
diff --git a/src/components/Subscribe/styles.ts b/src/components/Subscribe/styles.ts
@@ -16,6 +16,11 @@ export const ContainerSubscribe = styled.section`
       display: none !important;
     }
   }
+
+  max-width: ${({ theme: { media } }) => media.desktop_fullhd};
+  @media (min-width: ${({ theme: { media } }) => media.desktop_fullhd}) {
+    margin: 4rem auto 0;
+  }
 `;
 
 export const ContainerSubscribeContent = styled.div`

diff --git a/src/components/WhatWeTeach/styles.ts b/src/components/WhatWeTeach/styles.ts
@@ -8,6 +8,12 @@ export const Container = styled.main`
   height: 100%;
   margin-top: 4rem;
   padding: 0 7.5rem;
+  gap: 5rem;
+  max-width: ${({ theme: { media } }) => media.desktop_fullhd};
+
+  @media (min-width: ${({ theme: { media } }) => media.desktop_fullhd}) {
+    margin: 4rem auto 0;
+  }
 
   @media (max-width: ${({ theme: { media } }) => media.laptops_landscape}) {
     flex-direction: column;