Fixed homepage responsivness on Chromium webkit browsers

Lissy93 · Jul 18, 2023 · 679aab1 · 679aab1
1 parent 9a5af64
commit 679aab1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 5 deletions.
diff --git a/src/components/Results/TxtRecords.tsx b/src/components/Results/TxtRecords.tsx
@@ -4,7 +4,7 @@ import Row from 'components/Form/Row';
 
 const cardStyles = `
 grid-column: span 2;
-span.val { max-width: 32rem; }
+span.val { max-width: 32rem !important; }
 `;
 
 const TxtRecordCard = (props: {data: any, title: string, actionButtons: any }): JSX.Element => {

diff --git a/src/components/misc/FancyBackground.tsx b/src/components/misc/FancyBackground.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 
 
 const FancyBackground = (): JSX.Element => {
@@ -325,7 +326,7 @@ const FancyBackground = (): JSX.Element => {
     return { x: xx, y: yy };
   };
 
-  document.addEventListener('DOMContentLoaded', function () {
+  useEffect(() => {
     App.setup();
     App.draw();
 
@@ -334,7 +335,8 @@ const FancyBackground = (): JSX.Element => {
       requestAnimationFrame(frame);
     };
     frame();
-  });
+  }, []);
+
 
 
   return (

diff --git a/src/components/misc/Footer.tsx b/src/components/misc/Footer.tsx
@@ -8,18 +8,25 @@ const StyledFooter = styled.footer`
   padding: 0.5rem 0;
   background: ${colors.backgroundDarker};
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
+  align-items: center;
+  align-content: center;
   flex-wrap: wrap;
   opacity: 0.75;
   transition: all 0.2s ease-in-out;
+  @media (min-width: 1024px) {
+    justify-content: space-between;
+  }
   &:hover {
     opacity: 1;
   }
   span {
     margin: 0 0.5rem;
+    text-align: center; 
   }
 `;
 
+
 const Link = styled.a`
   color: ${colors.primary};
   font-weight: bold;

diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
@@ -119,7 +119,7 @@ const Home = (): JSX.Element => {
         />
         {/* <FindIpButton onClick={findIpAddress}>Or, find my IP</FindIpButton> */}
         { errorMsg && <ErrorMessage>{errorMsg}</ErrorMessage>}
-        <Button size="large" onClick={submit}>Analyze!</Button>
+        <Button styles="width: calc(100% - 1rem);" size="large" onClick={submit}>Analyze!</Button>
       </UserInputMain>
       <Footer isFixed={true} />
     </HomeContainer>