quotes mobile css fix [fixes #216]

gita · Oct 8, 2023 · c713b10 · c713b10
1 parent d4c24b0
commit c713b10
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx b/src/app/bhagavad-gita-quotes/[[...locale]]/QuotesPage.tsx
@@ -16,9 +16,9 @@ export default function QuotesPage(props: LocaleAndTranslations) {
   const [quoteIndex, setQuoteIndex] = useState(0);
 
   return (
-    <div className="mb-16">
+    <div className="">
       <QuotesBanner translate={translate} />
-      <div className="relative z-10 m-auto h-96 p-0 md:w-[90%] lg:w-[73%] xl:w-[66%]">
+      <div className="relative z-10 m-auto flex min-h-screen items-center p-0 md:w-[90%] lg:w-[73%] xl:w-[66%]">
         <QuotesNavigator
           quoteCount={quotes.length}
           quoteIndex={quoteIndex}

diff --git a/src/components/Quotes/Quote.tsx b/src/components/Quotes/Quote.tsx
@@ -13,14 +13,14 @@ export default function Quote({ quoteNumber, quote, translate }: Props) {
   const styles = useMyStyles();
   return (
     <>
-      <div className="absolute inset-x-0 top-[5%] mx-auto max-w-5xl text-center font-inter">
-        <SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 lg:top-12 lg:w-min" />
+      <div className="absolute inset-x-0 mx-auto text-center font-inter">
+        <SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto h-full w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 md:min-w-fit lg:w-min" />
       </div>
 
       <div className="xs:py-24 relative mx-auto max-w-5xl px-4 text-center font-inter sm:px-6 sm:py-28">
         <h2
           className={classNames(
-            "font-medium uppercase text-my-orange",
+            "font-medium uppercase text-my-orange mt-2",
             styles.fontSize.subHeading2,
           )}
         >