From a20c2422da0ade87e1a2b08e96b7015bdf29a4e4 Mon Sep 17 00:00:00 2001
From: Aadi Desai <21363892+supleed2@users.noreply.github.com>
Date: Mon, 13 Nov 2023 14:36:19 +0000
Subject: [PATCH] Fix Alchemy badge on small screens

---
 error.html |  4 ++--
 index.html |  4 ++--
 styles.css | 10 ++++++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/error.html b/error.html
index 9435b7f..0abdcfa 100644
--- a/error.html
+++ b/error.html
@@ -37,8 +37,8 @@
 		<picture>
 			<source srcset="https://static.alchemyapi.io/images/marketing/badgeLight.png"
 				media="(prefers-color-scheme: light)" />
-			<img onclick=logBadgeClick() id="badge-button" style="width:240px;height:53px"
-				src="https://static.alchemyapi.io/images/marketing/badge.png" alt="Alchemy Supercharged" />
+			<img onclick=logBadgeClick() id="badge-button" src="https://static.alchemyapi.io/images/marketing/badge.png"
+				alt="Alchemy Supercharged" />
 		</picture>
 	</a>
 </body>
diff --git a/index.html b/index.html
index 0fcbecf..1a8ac05 100644
--- a/index.html
+++ b/index.html
@@ -121,8 +121,8 @@
 		<picture>
 			<source srcset="https://static.alchemyapi.io/images/marketing/badgeLight.png"
 				media="(prefers-color-scheme: light)" />
-			<img onclick=logBadgeClick() id="badge-button" style="width:240px;height:53px"
-				src="https://static.alchemyapi.io/images/marketing/badge.png" alt="Alchemy Supercharged" />
+			<img onclick=logBadgeClick() id="badge-button" src="https://static.alchemyapi.io/images/marketing/badge.png"
+				alt="Alchemy Supercharged" />
 		</picture>
 	</a>
 </body>
diff --git a/styles.css b/styles.css
index 6b6d29d..a6b6438 100644
--- a/styles.css
+++ b/styles.css
@@ -294,6 +294,16 @@ body::-webkit-scrollbar {
 	margin: 0px 10%;
 }
 
+a>picture {
+	display: flex;
+	width: 100%;
+	justify-content: center;
+}
+
+#badge-button {
+	width: calc(min(240px, 80%));
+}
+
 @media screen and (width < 450px) {
 	.scroll-button {
 		display: none;