resize footer

iadoro · May 7, 2024 · 6c78d00 · 6c78d00
1 parent ba90b58
commit 6c78d00
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -89,21 +89,24 @@
         </div>
         <br />
       </div>
-      <br class="break-sm" />
+      <!-- <br class="break-sm" /> -->
       <div class="right2">
         <div class="top-right2">
           <a
             href="https://calendar.google.com/calendar/r/eventedit?text=IDM+Spring+24+Showcase!&dates=20240509T210000Z/20240510T000000Z&details=http://idm.show/S2024/&location=370+Jay+Street"
             target="_blank"
           >
-          <span>TIME:</span></a>
+          <span>time</span></a>
+          <br class="break-sm"/>
           thursday may 9th | 5pm - 8pm
           <br />
+          <br class="break-sm"/>
           <a
             href="https://www.google.com/maps/place/370+Jay+St,+Brooklyn,+NY+11201/@40.6931479,-73.9900248,17z/data=!3m1!4b1!4m6!3m5!1s0x89c25a4bc1eb7b11:0xe33785c6b51a38f1!8m2!3d40.6931479!4d-73.9874499!16s%2Fg%2F11c59wdx4s?coh=210790&entry=tts"
             target="_blank"
           >
-            <span>LOCATION:</span></a>
+            <span>location</span></a>
+            <br class="break-sm"/>
           370 jay street 2nd & 3rd floors
           <br />
           brooklyn, ny 11201
@@ -130,6 +133,9 @@
       <div class="right3"></div>
     </div>
   </section>
+  <br class="break-sm" />
+  <br class="break-sm" />
+  <br class="break-sm" />
     <div id="projects">
       <script src="all-projects.js"></script> 
       <br>

diff --git a/styles.css b/styles.css
@@ -121,8 +121,17 @@ footer a {
   color: #ffeddf;
 }
 
-footer img {
-  width: 330px;
+@media (min-width: 400px) {
+  footer img {
+    width: 330px;
+  }
+}
+
+/* smaller screen */
+@media (max-width: 400px) {
+  footer img {
+    width: 60vw;
+  }
 }
 
 /* title formatting start */
@@ -399,6 +408,7 @@ footer img {
   /* background: yellow; */
   grid-area: top-middle-container;
   color: #ddd92a;
+  font-weight: 600;
 }
 
 .top-right3 {
@@ -414,7 +424,7 @@ footer img {
 .bottom-middle3 {
   /* background: red; */
   grid-area: bottom-middle-container;
-  font-weight: 600;
+  /* font-weight: 600; */
 }
 
 .bottom-middle3 a {