Fixing Screen Width issues with images on homepage (CSS)

css/download_change.css

@@ -136,3 +136,18 @@
 .fixpad {
   margin: 10px;
 }
+
+@media screen and ( max-width: 1494px ){
+  .prodim{
+    max-width: 280px;
+  }
+  
+}
+
+@media screen and ( min-width: 992px ){
+  .fiximg{
+    max-width: 992px;
+  }
+  
+}
+

css/get-involved_change.css

@@ -292,3 +292,27 @@ button.learnmore:active::before {
   box-shadow: 0 0 0 2px #003333, 0 0 #1cdc9a;
   transform: translate3d(0, 0, -1em);
 }
+@media screen and ( max-height: 846px ) and (orientation : landscape){
+  .fiximg{
+    max-width: 400px;
+  }
+  .feature h1{
+    font-size: 25px !important;
+  }
+  .feature h2{
+    font-size: 19px !important;
+  }
+}
+
+@media screen and ( max-height: 568px ) and (orientation : landscape){
+  .fiximg{
+    max-width: 400px;
+  }
+  .feature h1{
+    font-size: 20px !important;
+  }
+  .feature h2{
+    font-size: 16px !important;
+  }
+}
+}

index.html

@@ -126,7 +126,7 @@ Boxes:
   <picture>
     <source srcset="assets/img/hero_main.webp" type="image/webp" />
     <source srcset="assets/img/hero_main.png" type="image/png" />
-    <img class="img-fluid" src="assets/img/hero_main.png" alt="Alt Text!" />
+    <img class="img-fluid fiximg" src="assets/img/hero_main.png" alt="Alt Text!" />
   </picture>
 </section>
 <section id="videosection">
@@ -156,7 +156,7 @@ Boxes:
   <picture>
     <source srcset="{{feature.webp}}" type="image/webp" />
     <source srcset="{{feature.png}}" type="image/png" />
-    <img class="img-fluid" src="{{feature.png}}" alt="Feature" />
+    <img class="img-fluid fiximg" src="{{feature.png}}" alt="Feature" />
   </picture>
 </section>
 {% endfor %}