left align text

src/components/PageContainer/PageContainer.module.scss

@@ -6,7 +6,7 @@
   @include utility.pageContainer();
   padding-block-start: var(--spacing-medium);
   margin-block-start: 0;
-  margin-block-end: 0;
+  margin-block-end: var(--spacing-mega);
   margin-inline-start: auto;
   margin-inline-end: auto;
 

src/pages/ramadan-activities/RamadanActivities.module.scss

@@ -0,0 +1,12 @@
+@use "src/styles/breakpoints";
+
+.container {
+    text-align: left !important;
+}
+
+.verseContainer {
+    @include breakpoints.smallerThanTablet {
+        min-height: calc(9 * var(--spacing-mega));
+    }
+    min-height: calc(5 * var(--spacing-mega));
+}

src/pages/ramadan-activities/index.tsx

@@ -3,9 +3,12 @@
 /* eslint-disable i18next/no-literal-string */
 /* eslint-disable jsx-a11y/anchor-has-content */
 /* eslint-disable jsx-a11y/control-has-associated-label */
+import classNames from 'classnames';
 import { NextPage } from 'next';
 import useTranslation from 'next-translate/useTranslation';
 
+import pageStyles from './RamadanActivities.module.scss';
+
 import NextSeoWrapper from '@/components/NextSeoWrapper';
 import PageContainer from '@/components/PageContainer';
 import EmbeddableVerseCell from '@/components/QuranReader/TranslationView/EmbeddableVerseCell';
@@ -45,8 +48,10 @@ const RamadanActivitiesPage: NextPage = (): JSX.Element => {
       />
       <RamadanActivityHero />
       <PageContainer>
-        <div className={styles.contentPage} dir="ltr">
-          <EmbeddableVerseCell chapterId={2} verseNumber={183} />
+        <div className={classNames(pageStyles.container, styles.contentPage)} dir="ltr">
+          <div className={pageStyles.verseContainer}>
+            <EmbeddableVerseCell chapterId={2} verseNumber={183} />
+          </div>
           <div className={styles.subSection}>
             <h1>Mindful Fasting📿</h1>
             <div className={styles.subHeading}>