diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
index cd876426..12bdbece 100644
--- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
+++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
@@ -13,9 +13,7 @@ const Splash = memo(() => {
-
- May 17th 5:00 PM - May 19th 6:00 PM
-
+
May 17th - May 19th
diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
index 7be4e952..22b782b5 100644
--- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
+++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
@@ -42,29 +42,39 @@
text-align: center;
position: absolute;
place-self: center;
- bottom: 15%;
+ bottom: 5%;
z-index: 110;
+ @media screen and (min-width: 851px) {
+ bottom: 15%;
+ }
+
.time {
font-size: min(7vw, 40px);
grid-column: 1/3;
font-family: "Gluten", cursive;
font-weight: 600;
- margin: 0 2rem 24px;
+ margin: 0 2rem 1rem;
}
.wrapper {
display: grid;
- grid-template-columns: 1fr;
- column-gap: 40px;
+ grid-template-columns: repeat(
+ 2,
+ 1fr
+ ); // TODO: Turn into 3 columns when volunteer form is ready
+ column-gap: 20px;
row-gap: 10px;
max-width: 800px;
margin: 0 auto;
+ width: fit-content;
+
+ @media screen and (max-width: 850px) {
+ grid-template-columns: repeat(1, 1fr);
- @media screen and (max-width: 800px) {
- grid-template-columns: 1fr;
.border {
padding: 4px !important;
+ min-width: 100%;
}
.app {
border-radius: 16px !important;
@@ -121,7 +131,6 @@
.decoration {
position: absolute;
- pointer-events: none;
max-width: 30%;