diff --git a/static/style.css b/static/style.css
index 84662f2..108d59b 100644
--- a/static/style.css
+++ b/static/style.css
@@ -633,6 +633,11 @@ a.search_subreddit:hover {
 	width: auto;
 }
 
+img.post_media {
+	max-width: 100%;
+	width: auto;
+}
+
 #post_url {
 	color: var(--accent);
 	margin: 5px 20px;
diff --git a/templates/base.html b/templates/base.html
index 6400ebd..343c759 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -38,11 +38,17 @@
 			<div id="links">
 				<a id="settings_link" href="/settings">
 					<span>settings</span>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<title>settings</title>
+						<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+					</svg>
 				</a>
 				<a id="code" href="https://github.com/spikecodes/libreddit">
 					<span>code</span>
-					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+					<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<title>code</title>
+						<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>
+					</svg>
 				</a>
 			</div>
 		</nav>
diff --git a/templates/post.html b/templates/post.html
index 619005e..fe1441c 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -72,8 +72,8 @@
 					xmlns="http://www.w3.org/2000/svg">
 						<image width="100%" height="100%" href="{{ post.media.url }}"/>
 						<desc>
-							<img alt="Post image" src="{{ post.media.url }}"/>
-						</dev>
+							<img class="post_media" alt="Post image" src="{{ post.media.url }}"/>
+						</desc>
 				</svg>
 			</a>
 			{% else if post.post_type == "video" || post.post_type == "gif" %}
diff --git a/templates/search.html b/templates/search.html
index 1d6bb1e..44f3b35 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -71,8 +71,8 @@
 					xmlns="http://www.w3.org/2000/svg">
 						<image width="100%" height="100%" href="{{ post.media.url }}"/>
 						<desc>
-							<img alt="Post image" src="{{ post.media.url }}"/>
-						</dev>
+							<img class="post_media {% if post.media.height /  post.media.width < 2 %}short{% endif %}" alt="Post image" src="{{ post.media.url }}"/>
+						</desc>
 				</svg>
 			</a>
 			{% else if post.post_type != "self" %}
@@ -84,7 +84,7 @@
 				</svg>
 				{% else %}
 				<svg width="{{ post.thumbnail.width }}px" height="{{ post.thumbnail.height }}px" xmlns="http://www.w3.org/2000/svg">
-					<image  alt="Thumbnail" width="100%" height="100%" href="{{ post.thumbnail.url }}"/>
+					<image  width="100%" height="100%" href="{{ post.thumbnail.url }}"/>
 				</svg>
 				{% endif %}
 				<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
diff --git a/templates/subreddit.html b/templates/subreddit.html
index 6fd7325..3ac6161 100644
--- a/templates/subreddit.html
+++ b/templates/subreddit.html
@@ -66,8 +66,8 @@
 						xmlns="http://www.w3.org/2000/svg">
 							<image width="100%" height="100%" href="{{ post.media.url }}"/>
 							<desc>
-								<img alt="Post image" src="{{ post.media.url }}"/>
-							</dev>
+								<img class="post_media {% if post.media.height /  post.media.width < 2 %}short{% endif %}" alt="Post image" src="{{ post.media.url }}"/>
+							</desc>
 					</svg>
 				</a>
 				{% else if post.post_type != "self" %}
@@ -79,7 +79,7 @@
 					</svg>
 					{% else %}
 					<svg width="{{ post.thumbnail.width }}px" height="{{ post.thumbnail.height }}px" xmlns="http://www.w3.org/2000/svg">
-						<image  alt="Thumbnail" width="100%" height="100%" href="{{ post.thumbnail.url }}"/>
+						<image width="100%" height="100%" href="{{ post.thumbnail.url }}"/>
 					</svg>
 					{% endif %}
 					<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>
diff --git a/templates/user.html b/templates/user.html
index a556a98..faf14ff 100644
--- a/templates/user.html
+++ b/templates/user.html
@@ -56,8 +56,8 @@
 						xmlns="http://www.w3.org/2000/svg">
 							<image width="100%" height="100%" href="{{ post.media.url }}"/>
 							<desc>
-								<img alt="Post image" src="{{ post.media.url }}"/>
-							</dev>
+								<img class="post_media {% if post.media.height /  post.media.width < 2 %}short{% endif %}" alt="Post image" src="{{ post.media.url }}"/>
+							</desc>
 					</svg>
 				</a>
 				{% else if post.post_type != "self" %}
@@ -69,7 +69,7 @@
 					</svg>
 					{% else %}
 					<svg width="{{ post.thumbnail.width }}px" height="{{ post.thumbnail.height }}px" xmlns="http://www.w3.org/2000/svg">
-						<image  alt="Thumbnail" width="100%" height="100%" href="{{ post.thumbnail.url }}"/>
+						<image  width="100%" height="100%" href="{{ post.thumbnail.url }}"/>
 					</svg>
 					{% endif %}
 					<span>{% if post.post_type == "link" %}{{ post.domain }}{% else %}{{ post.post_type }}{% endif %}</span>