Fix overflow in Where we plant section

Virtual4087 · Oct 18, 2023 · 4cbf9ef · 4cbf9ef
1 parent cd276ee
commit 4cbf9ef
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/index.html b/index.html
@@ -56,15 +56,17 @@
         <div class="heading">WHERE WE PLANT<br>
             <div class="line"></div>
         </div>
-        <div class="country_images"><img src="images/For_Website/Countries/Nepal.jpg" alt="Nepal"><span>Nepal</span></div>
-        <div class="country_images"><img src="images/For_Website/Countries/Thailand.jpg" alt="Thailand"><span>Thailand</span></div>
-        <div class="country_images"><img src="images/For_Website/Countries/India.jpg" alt="India"><span>India</span></div>
-        <div class="country_images"><img src="images/For_Website/Countries/Maldives.jpg" alt="Maldives"><span>Maldives</span></div>
-        <div class="country_images"><img src="images/For_Website/Countries/Bhutan.jpg" alt="Bhutan"><span>Bhutan</span></div>
-        <div class="country_images"><img src="images/For_Website/Countries/Sri_Lanka.jpg" alt="Sri Lanka"><span>Sri Lanka</span></div>
-        <div class="country_images"><img src="images/For_Website/Countries/Malaysia.jpeg" alt="Malaysia"><span>Malaysia</span></div>
-        <div class="country_images"><img src="images/For_Website/Countries/Indonesia.jpeg" alt="Indonesia"><span>Indonesia</span></div>
-        <div class="country_images"><img src="images/For_Website/Countries/Hong_Kong.jpg" alt="Hong_Kong"><span>Hong Kong</span></div>
+        <div class="image_container">
+            <div class="country_images"><img src="images/For_Website/Countries/Nepal.jpg" alt="Nepal"><span>Nepal</span></div>
+            <div class="country_images"><img src="images/For_Website/Countries/Thailand.jpg" alt="Thailand"><span>Thailand</span></div>
+            <div class="country_images"><img src="images/For_Website/Countries/India.jpg" alt="India"><span>India</span></div>
+            <div class="country_images"><img src="images/For_Website/Countries/Maldives.jpg" alt="Maldives"><span>Maldives</span></div>
+            <div class="country_images"><img src="images/For_Website/Countries/Bhutan.jpg" alt="Bhutan"><span>Bhutan</span></div>
+            <div class="country_images"><img src="images/For_Website/Countries/Sri_Lanka.jpg" alt="Sri Lanka"><span>Sri Lanka</span></div>
+            <div class="country_images"><img src="images/For_Website/Countries/Malaysia.jpeg" alt="Malaysia"><span>Malaysia</span></div>
+            <div class="country_images"><img src="images/For_Website/Countries/Indonesia.jpeg" alt="Indonesia"><span>Indonesia</span></div>
+            <div class="country_images"><img src="images/For_Website/Countries/Hong_Kong.jpg" alt="Hong_Kong"><span>Hong Kong</span></div>
+        </div>
     </div>
 
 

diff --git a/style.css b/style.css
@@ -231,7 +231,7 @@ nav .nav_buttons{
 }
 
 .locations img{
-    width: 300px;
+    width: 100%;
     border-radius: 10px;
     margin: 5px 10px;
     transition: 2sec;
@@ -259,10 +259,8 @@ nav .nav_buttons{
     top: 80%;
     left: 0;
     right: 0;
-    bottom: 6%;
-
+    bottom: 15px;
     text-align: center;
-
     background-color: rgba(0, 0, 0, 0.562);
     border-radius: 0px 0px 10px 10px;
     transition: 0.5s;
@@ -610,3 +608,10 @@ nav .nav_buttons{
     bottom: 60%;
     right: 35%;
 }
+
+.image_container{
+    width: 100%;
+    display: grid;
+    grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
+    padding: 20px;
+}