Merge pull request #591 from Saideepak01/main

spirituality page reposnivness fix
Susmita-Dey · Jul 4, 2023 · 50deb3e · 50deb3e
2 parents 4b4ea0c + 1445796
commit 50deb3e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 15 deletions.
diff --git a/css/spirituality.css b/css/spirituality.css
@@ -41,6 +41,12 @@ header {
   background-size: cover;
 }
 
+.pt-head {
+  font-size: 18px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
 .back{
     min-height: 100vh;
     width: 100%;
@@ -49,6 +55,9 @@ header {
 }
 
 section {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   margin: 2em;
 }
 
@@ -114,6 +123,9 @@ nav {
 }
 
 .center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -228,9 +240,8 @@ color: #ffffff;
 
 .title-button{
     width: 201px;
-    margin: 50px 250px;
+    margin-top: 50px;
 height: 44px;
-top: 574px;
     font-family: 'Lato';
     text-align: center;
     align-items: center;
@@ -289,10 +300,10 @@ hr {
 }
 .about .bfit {
   display: flex;
+  align-items: center;
 }
 .btext{
   margin-top: 40px;
-  margin-left: 45px;
   font-family: 'Montserrat';
   padding: 5%;
 }
@@ -302,9 +313,6 @@ hr {
 
 }
 
-.points{
-  margin: 0 100px;
-}
 .pt1 p{
   font-family: 'Montserrat';
 }
@@ -409,6 +417,25 @@ hr {
   header {
     min-height: 100vh;
   }
+  #subtitle {
+    width: 80%;
+    font-size: 20px;
+  }
+  #title {
+    font-size: 2.5rem;
+  }
+  .title-button {
+    font-size: 1rem;
+    width: 150px
+  }
+  .pt-head {
+    font-size: 18px;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  .btext .baby-text {
+    font-size: 20px;
+  }
 }
 
 @media screen and (min-width: 650px) {
@@ -459,9 +486,11 @@ footer{
   }
 
   .footer-side-col{
-    display: grid;
-    grid-template-columns: repeat(4,1fr);
-    width: 80%;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    /* grid-template-columns: repeat(4,1fr);
+    width: 80%; */
   }
 
   .footer-side-col > .col{

diff --git a/html/spirituality.html b/html/spirituality.html
@@ -68,7 +68,7 @@
         </div>
             <div class="center"> 
                 <h1 id="title">SPIRITUALITY</h1>
-                <h3 id="subtitle">Peace is the result of retraining your mind to process life as it is, rather than as you think it should be.<h3 class="title-button">
+                <h3 id="subtitle">Peace is the result of retraining your mind to process life as it is, rather than as you think it should be.</h3><h3 class="title-button">
                     JOIN NOW
                 </h3></div>
 
@@ -93,32 +93,32 @@ <h1 class="section-headings">ABOUT</h1>
     <hr/>
     <section id="steps">
       <h1 class="section-headings">WAYS TO PRACTICE</h1>
-      <div class="points">
+      <div>
         <div class="pt1">
           <h2 class="pt-head">
 
-          <i class="fa fa-circle" aria-hidden="true" style="font-size:12px; margin-top:-9px"></i> Pray or Meditate
+          <i class="fa fa-circle" aria-hidden="true"></i> Pray or Meditate
           </h2>
           <p style="text-align: center;">Praying more, meditating more, attending gatherings of like-minded believers<br> more often and joining a prayer or meditation group are just a few ways you can<br> put your spirituality into practice.</p>
         </div>
         <div class="pt1">
           <h2 class="pt-head">
 
-          <i class="fa fa-circle" aria-hidden="true" style="font-size:12px; margin-top:-9px"></i> Give
+          <i class="fa fa-circle" aria-hidden="true"></i> Give
           </h2>
           <p style="text-align: center;">According to Bitkoff, you can grow in your spiritual development by helping<br>and giving to others. Donate to charity. Volunteer.<br> Offer your skills to those who need them.</p>
         </div>
         <div class="pt1">
           <h2 class="pt-head">
 
-          <i class="fa fa-circle" aria-hidden="true" style="font-size:12px; margin-top:-9px"></i> Live Healthier
+          <i class="fa fa-circle" aria-hidden="true"></i> Live Healthier
           </h2>
           <p style="text-align: center;">If you want to improve your spirituality and spiritual development, you also need to<br> take care of your physical body: eat better. Exercise more. Stop smoking. Drink less<br> alcohol.
         </div>
         <div class="pt1">
           <h2 class="pt-head">
 
-          <i class="fa fa-circle" aria-hidden="true" style="font-size:12px; margin-top:-9px"></i> Focus on Yourself  
+          <i class="fa fa-circle" aria-hidden="true"></i> Focus on Yourself  
           </h2>
           <p style="text-align: center;">Focus on yourself, but not in quite the way you might be thinking. This doesn’t<br> mean going shopping for new clothes or getting your hair done. The focus should<br> be on your inner self, rather than your outer self.</p>
         </div>