overlap

src/components/Problems.tsx

@@ -174,10 +174,10 @@ export function Problems(){
                     </img>
                     <p style={{'position': 'fixed','top': '17vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title1}</p>
                     <p style={{'position': 'fixed','top': '23vh', 'width': '82vw', 'zIndex': '1','fontSize': '3vw', 'fontWeight': 'bold', 'textAlign': 'center'}}>{Title2}</p>
-                    <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
-                    <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
-                    <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '40vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
-                    <p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}>The constant <strong>fear of suffocating</strong> makes life incredibly challenging</p>
+                    <p style={{'position': 'fixed','top': '65vh', 'left': '20vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob11 + " " + Prob12 + " " + Prob13}</p>
+                    <p style={{'position': 'fixed','top': '65vh', 'left': '40vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob21 + " " + Prob22 + " " + Prob23}</p>
+                    <p style={{'position': 'fixed','top': '65vh', 'left': '60vw', 'zIndex': '1', 'width': '30vh', 'textAlign': 'center'}}>{Prob31 + " " + Prob32 + " " + Prob33}</p>
+                    <p style={{'position': 'fixed','top': '85vh', 'left': '35vw', 'zIndex': '1'}}></p>
             </div>
             <div id="sciency"></div>
             

src/contents/Home.tsx

@@ -19,7 +19,7 @@ export function Home() {
                        'scale': '0.25'}}>
             <img src="https://static.igem.wiki/teams/5247/landing/indicator.webp"></img>
           </div>
-
+          <div id="scrollstart"></div>
           <Breathe></Breathe>
           
           <Problems></Problems>

src/headers/home-h.tsx

@@ -14,7 +14,7 @@ export function HOMEH() {
             <div className="col header-button-row">
               <p> 
                   <div className="col">
-                    <button> <b>CLICK</b> to go directly to our Project Description.</button> 
+                    <button  onClick={() => goToPageAndScroll("Abstract", "/description")} > <b>CLICK</b> to go directly to our Project Description.</button> 
                   </div>
               </p>
               <p>
@@ -25,7 +25,7 @@ export function HOMEH() {
               
               <p>
               <div className="col">
-                    <button> <b>SCROLL</b> to see whole animation.</button>  
+                    <button onClick={() => goToPageAndScroll("scrollstart", "")}> <b>SCROLL</b> to see whole animation.</button>  
                   </div>
               </p>
             </div>