diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index b4d598f..14ba063 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,11 +1,11 @@
 ---
-import BaseHead from '../components/blog/BaseHead.astro';
-import Header from '../components/blog/Header.astro';
-import Footer from '../components/blog/Footer.astro';
-import FormattedDate from '../components/blog/FormattedDate.astro';
-import type { CollectionEntry } from 'astro:content';
+import BaseHead from "../components/blog/BaseHead.astro";
+import Header from "../components/blog/Header.astro";
+import Footer from "../components/blog/Footer.astro";
+import FormattedDate from "../components/blog/FormattedDate.astro";
+import type { CollectionEntry } from "astro:content";
 
-type Props = CollectionEntry<'blog'>['data'];
+type Props = CollectionEntry<"blog">["data"];
 
 const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 ---
@@ -51,6 +51,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 			.last-updated-on {
 				font-style: italic;
 			}
+			@media (max-width: 720px) {
+				main {
+					width: 100%;
+				}
+			}
 		</style>
 	</head>
 
@@ -59,7 +64,16 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 		<main>
 			<article>
 				<div class="hero-image">
-					{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
+					{
+						heroImage && (
+							<img
+								width={700}
+								height={510}
+								src={heroImage}
+								alt=""
+							/>
+						)
+					}
 				</div>
 				<div class="prose">
 					<div class="title">