From 213293b9f4d9cf4f4442b7f5eb0fd5fcd739b5f2 Mon Sep 17 00:00:00 2001
From: Tben <52448020+BenjaminToby@users.noreply.github.com>
Date: Sat, 26 Mar 2022 20:38:02 +0100
Subject: [PATCH] updates

---
 components/PortfolioEntry.jsx | 12 ++----------
 styles/main.css               | 36 ++++++++++++++++++++++++-----------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/components/PortfolioEntry.jsx b/components/PortfolioEntry.jsx
index 5243260..bf921c8 100644
--- a/components/PortfolioEntry.jsx
+++ b/components/PortfolioEntry.jsx
@@ -36,16 +36,8 @@ export default function PortfolioEntry({ title, description, url, image }) {
     return (
         <div className="portfolio-entry-block">
             <h2 style={ { marginTop: "0" } }><TextShuffler textInput={ title } /></h2>
-            <div style={ {
-                width: "100%",
-                height: "300px",
-                marginBottom: "15px"
-            } }>
-                <img src={ image } alt="" style={ {
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover"
-                } } />
+            <div className="portfolio-image-wrapper">
+                <img src={ image } alt="" className="portfolio-image" />
             </div>
             <span>
                 <TextShuffler textInput={ description } />
diff --git a/styles/main.css b/styles/main.css
index a1c88e4..8d8069e 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -260,14 +260,6 @@ nav a:hover {
     border: 1px solid rgba(255, 255, 255, 0.3);
     padding: 20px;
 }
-
-.portfolio-entry-block img {
-    width: 100%;
-    height: 300px;
-    object-fit: contain;
-    object-position: left top;
-    margin-bottom: 20px;
-}
 /*############################################# -- Contact Forms */
 form {
     margin-top: 40px;
@@ -320,6 +312,23 @@ textarea {
     margin-bottom: 3px;
 }
 
+.portfolio-image-wrapper {
+    width: 100%;
+    height: 300px;
+    margin-bottom: 15px;
+    overflow: hidden;
+}
+
+.portfolio-image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+    height: 300px;
+    object-position: left top;
+    margin-bottom: 20px;
+}
+
 /* ###############################################################################################
 ##################################################################################################
 ##################################################################################################
@@ -360,9 +369,14 @@ textarea {
 }
 
 @media (max-width: 600px) {
-    .portfolio-entry-block img {
-        object-fit: cover;
-        height: 200px;
+    .portfolio-image-wrapper {
+        height: auto;
+    }
+
+    .portfolio-image {
+        object-fit: contain;
+        height: auto;
+        margin: 0;
     }
 }