fixed button placement

src/App/App.css

@@ -264,6 +264,13 @@ color: var(--text-primary);
 /* * * * * * * */
 /* * GENERAL * */
 /* * * * * * * */
+
+section{
+  margin-bottom: var(--big-margin) !important;
+  margin-top: var(--big-margin) !important;
+  padding-top: var(--big-padding) !important;
+}
+
 .relative{position: relative;}
 .absolute{position: absolute;}
 .align-items-center{align-items:center!important}
@@ -472,8 +479,8 @@ margin-bottom: 10vw !important;
 
 
  h1, h2, h3, h4, h5{
-  padding-top: var(--small-padding) !important;
-  padding-bottom: var(--small-padding) !important;
+  margin-top: var(--simple-margin) !important;
+  margin-bottom: var(--simple-margin) !important;
   color: var(--text-primary) !important;
   font-weight: bolder !important;
  }
@@ -2985,12 +2992,18 @@ span{
       BUTTONS
 ========================
 */
+button span {
+  margin: auto;
+}
 button {
   margin-top: var(--simple-margin) !important;
   margin-bottom: var(--simple-margin) !important;
   border-radius: var(--border-radius) !important;
   cursor: pointer;
+  margin-left: auto !important;
+  margin-right: auto !important; 
   text-align: center;
+  display: grid;
 }
  .btn1{
   padding: var(--button-padding) var(--small-padding) !important;

src/components/Buttons.tsx

@@ -179,13 +179,13 @@ export function ButtonOne({text, open, openclass}: {text:string, open:string, op
   const { goToPagesAndOpenTab } = useNavigation();
   if (openclass) {
     return(
-      <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}>{text}</button>
+      <button className="btn-one" onClick={() => goToPagesAndOpenTab(open, "")}><span>{text}</span></button>
     )
     
   }
   else{
     return(
-        <button className="btn-one" onClick={() => openFromOtherPage(open)}>{text}</button>
+        <button className="btn-one" onClick={() => openFromOtherPage(open)}> <span>{text}</span> </button>
     )
   }
 }
@@ -194,7 +194,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
   const { goToPageWithTabAndScroll } = useNavigation();
   if (openclass) {
     return(
-        <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}>{text}</button>
+        <button className="btn-one" onClick={() => goToPageWithTabAndScroll({ path: "", tabId: open, scrollToId: scrollId })}><span>{text}</span></button>
     )
   }
   else{
@@ -212,7 +212,7 @@ export function ButtonOneWithScroll({text, open, openclass, scrollId}: {text:str
 
 export function ButtonOneEngineering({label, open, scrollToId}: {label:string, open:string, scrollToId: string}){
   return(
-    <button className="btn-one" onClick={openThem({it: open, scrollToId})}>{label}</button>
+    <button className="btn-one" onClick={openThem({it: open, scrollToId})}><span>{label}</span></button>
   )
 }
 

src/contents/Human Practices/Further Engagement/Collaborations.tsx

@@ -9,13 +9,13 @@ export function HPCollabs(){
     return (
         <div className="col">
             <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
-                <div className="col">
+                <div className="col ">
                     <ButtonOne openclass="coll-cycletab" text="Overview" open="coll-overview"></ButtonOne>
                 </div>
-                <div className="col">
+                <div className="col ">
                     <ButtonOne openclass="coll-cycletab" text="Collabs in 2024" open="colls2024"></ButtonOne>
                 </div>
-                <div className="col">
+                <div className="col ">
                     <ButtonOne openclass="coll-cycletab" text="LNP Handbook" open="Handbook"></ButtonOne>
                 </div>
             </div>

src/contents/Human Practices/Further Engagement/Entrepreneurship.tsx

@@ -8,13 +8,13 @@ export function HPEntrepreneur(){
     return( 
         <div className="col">
         <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
-            <div className="col">
+            <div className="col ">
                 <ButtonOneWithScroll openclass="ent-cycletab" text="Overview" open="ent-overview" scrollId="ent-heading"/>
             </div>
-            <div className="col">
+            <div className="col ">
                 <ButtonOneWithScroll openclass="ent-interview" text="Interviews with Founders" open="ent-interview" scrollId="ent-inter-heading"/>
             </div>
-            <div className="col">
+            <div className="col ">
                 <ButtonOneWithScroll openclass="ent-interview" text="Next Steps" open="ent-next" scrollId="ent-course-heading"/>
             </div>
         </div>

src/contents/Human Practices/Further Engagement/Outreach.tsx

@@ -9,13 +9,13 @@ export function HPOutreach(){
     return(
         <div className="col">
         <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "5vh"}}>
-            <div className="col">
+            <div className="col ">
             <ButtonOne openclass="out-cycletab" text="Overview" open="out-overview"></ButtonOne>
           </div>
-          <div className="col">
+          <div className="col ">
             <ButtonOne openclass="out-cycletab" text="MUKOmove" open="mukomove"></ButtonOne>
           </div>
-          <div className="col">
+          <div className="col ">
             <ButtonOne openclass="out-cycletab" text="Waffle Sale" open="Waffle sale"></ButtonOne>
           </div>
         </div>

src/contents/Human Practices/IHP.tsx

@@ -229,30 +229,30 @@ export function HPIntegrated(){
                 <SWOTone/>
 
             <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
-                <div className="col">
+                <div className="col ">
                     <ButtonOne text="Patients" open="pats" openclass="subcycletab"></ButtonOne>
                 </div>
-                <div className="col">
+                <div className="col ">
                     <ButtonOne text="Industry" open="inds" openclass="subcycletab"></ButtonOne>
                 </div>
-                <div className="col">
+                <div className="col ">
                     <ButtonOne text="Academia" open="acs" openclass="subcycletab"></ButtonOne>
                 </div>
-                <div className="col">
+                <div className="col ">
                     <ButtonOne text="Healthcare" open="healths" openclass="subcycletab"></ButtonOne>
                 </div>
                 </div>
                 <div className="row align-items-center" style={{ marginBottom: "5vh"}}>
-                <div className="col">
+                <   div className="col ">
                     <ButtonOne text="Government" open="govs" openclass="subcycletab"></ButtonOne>
                     </div>
-                    <div className="col">
+                    <div className="col ">
                     <ButtonOne text="Community" open="comms" openclass="subcycletab"></ButtonOne>
                     </div>
-                    <div className="col">
+                    <div className="col ">
                     <ButtonOne text="The Public" open="pubs" openclass="subcycletab"></ButtonOne>
                     </div>
-                    <div className="col">
+                    <div className="col ">
                     <ButtonOne text="Business" open="busi" openclass="subcycletab"></ButtonOne>
                 </div>
                 </div>

src/contents/Human Practices/Introduction.tsx

@@ -15,16 +15,16 @@ export function HPIntroduction(){
             <H5 text="- Connecting our project to real life -"/>
             <BlockQuoteB text="Science and everyday life cannot and should not be separated." cite="Rosalind Franklin"/>
             <div className="row align-items-center" style={{marginTop: "5vh", marginBottom: "1vh"}}>
-            <div className="col">
+            <div className="col ">
                 <ButtonOne openclass="intro-cycletab" text="Our Understanding of HP" open="understanding"></ButtonOne>
                 </div>
-                <div className="col">
+                <div className="col ">
                 <ButtonOne openclass="intro-cycletab" text="Our Mission & Vision" open="mission"></ButtonOne>
                 </div>
-                <div className="col">
+                <div className="col ">
                 <ButtonOne openclass="intro-cycletab" text="Our Approach" open="approach"></ButtonOne>
                 </div>
-                <div className="col">
+                <div className="col ">
                 <ButtonOne openclass="intro-cycletab" text="Our Target Groups" open="targets"></ButtonOne>
                 </div>
             </div>

src/contents/interviews.tsx

@@ -111,11 +111,11 @@ export function Ints() {
                     <img className="interview-img" src="https://static.igem.wiki/teams/5247/photos/hp/mattijs.jpg"/>
                   </div>
                   <div className="col">
-                  <div className="col">
+                  <div className="col ">
                       <ButtonOne text="Erstes Interview" open="mattijsinv1"></ButtonOne>
                   </div>
                   <br/>
-                  <div className="col">
+                  <div className="col ">
                       <ButtonOne text="Zweites Interview" open="mattijsinv2"></ButtonOne>
                     </div>
                   </div>