updates

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 } />

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;
     }
 }