Improve resposivity of AboutPage

Signed-off-by: Henrique V. Ehrenfried <hvehrenfried@inf.ufpr.br>

src/Pages/AboutPage.js

@@ -41,7 +41,6 @@ const Secao1 = styled.div`
 
 
 const Secao2 = styled.div`
-  height: 600px;
   color: #666;
   text-align: center;
   font-size: 14px;
@@ -54,6 +53,7 @@ const Secao2 = styled.div`
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
+    padding: 20px 0px;
 
     .container-secao {
       height: 100%;
@@ -62,8 +62,8 @@ const Secao2 = styled.div`
       justify-content: center;
 
 
-      .conteudo-secao {
 
+      .conteudo-secao {
         h2 {
           text-align: center;
           font-family: Roboto, sans-serif;
@@ -94,22 +94,19 @@ const Secao2 = styled.div`
 `
 
 const Secao3 = styled.div`
-  height: auto;
   padding: 30px 0;
   background-color: #1ab9de;
   color: #fff;
 
   .container {
 
-    height: 100%;
     padding-right: 15px;
     padding-left: 15px;
     margin-right: auto;
     margin-left: auto;
+    padding-left: 20px;
 
     .container-secao {
-      height: 100%;
-      width: 1110px;
       padding-right: 15px;
       padding-left: 15px;
       display: flex;
@@ -553,7 +550,23 @@ const Secao8 = styled.div`
 
 
 export default function AboutPage(props) {
-
+  var pageWidth = window.innerWidth
+  const calculateMargin = ((pageWidth)=>{
+    if (pageWidth > 700 && pageWidth <= 850){
+      return "40%"
+    }
+    if (pageWidth > 850 && pageWidth <= 900){
+      return "25%"
+    }
+    if (pageWidth > 900 && pageWidth < 1100){
+      return "13%"
+    }
+    else{
+      return "0%"
+    }
+  })
+  var marginSet = calculateMargin(pageWidth)
+  const styleIMGSec3 = {float:"right", width:"80%", maxWidth:475, marginRight:30, marginTop: marginSet}
   return (
     <>
 
@@ -569,9 +582,7 @@ export default function AboutPage(props) {
           <div className="container-secao">
             <div className="conteudo-secao">
               <h2>Um Pouco da História</h2>
-              <br/>
-              <br/>
-              <p>
+              <p style={{marginLeft:20, marginRight:20, marginBottom:40}}>
                 A partir de uma iniciativa do Ministério da Educação, surge
                 em outubro de 2015 a proposta de reunir e disponibilizar, em um
                 único lugar, os Recursos Educacionais Digitais dos principais
@@ -584,9 +595,6 @@ export default function AboutPage(props) {
                 entre professoras(es)!<br/><br/>Faça parte deste espaço de
                 colaborativo você também!
               </p>
-              <br/>
-              <br/>
-              <br/>
               <img src={Agpl} alt="agpl" />
               <p>
                 Este programa é software livre, sob os termos da
@@ -605,7 +613,7 @@ export default function AboutPage(props) {
           <div className="container-secao">
             <div className="conteudo-secao">
               <Grid container spacing={0}>
-                <Grid item xs={6}>
+                <Grid item xs style={{paddingRight:20}}>
                   <h2>O que nos faz diferentes?</h2>
                   <h3>Espaço construído por e para professores</h3>
                   <p>
@@ -626,9 +634,15 @@ export default function AboutPage(props) {
                   os Recursos Educacionais Digitais dos principais portais abertos.
                   </p>
                 </Grid>
-                <Grid item xs={6}>
-                  <img src={Notebook} alt="Imagem Notebook"/>
-                </Grid>
+                {
+                  pageWidth >= 751?  
+                  <Grid item xs={6} style={{position:"relative"}}>
+                    <img src={Notebook} alt="Imagem Notebook" style={styleIMGSec3}/>
+                  </Grid>
+                  :
+                  <div/>
+                }
+                
 
               </Grid>