updated banner style

Author: stoyanovich

_pages/exchange.md

@@ -7,7 +7,7 @@ nav: false
 nav_order: 6
 ---
 
-<div id="banner-other" style="background-image: url('{{ "/assets/img/banner/exchange_banner.jpg" | relative_url }}');"></div>
+<div id="banner-exchange" style="background-image: url('{{ "/assets/img/banner/exchange_banner.jpg" | relative_url }}');"></div>
 
 <!-- <h4 class="category" id="collaboration">#RAIforUkraine: Responsible AI Research for Ukrainian Scholars</h4> -->
 

assets/css/main.scss

@@ -31,21 +31,23 @@ $max-content-width: {{ site.max_width }};
   #banner-other {
     display: none;
   }
+  #banner-exchange {
+    display: none;
+  }
 }
 
 .banner-light {
   background: url(Landing_Banner_V1.png) no-repeat center center;
-  // resize background scale
   background-size: auto 600px;
   height: 600px; 
-  width: 100vw;  /* Use vw (viewport width) units */
-  position: relative;  /* Added */
-  left: 50%;  /* Added */
-  right: 50%;  /* Added */
-  margin-left: -50vw;  /* Added */
-  margin-right: -50vw;  /* Added */
-  margin-bottom: 20px;  /* Added */
-  margin-top: -10px;  /* Added */
+  width: 100vw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50vw;
+  margin-right: -50vw;
+  margin-bottom: 20px;
+  margin-top: -10px;
 }
 
 .banner-dark {
@@ -65,15 +67,20 @@ $max-content-width: {{ site.max_width }};
 
 #banner-other {
   background-size: cover;
-  height: 500px; 
-  width: 100vw;  /* Use vw (viewport width) units */
-  position: relative;  /* Added */
-  left: 50%;  /* Added */
-  right: 50%;  /* Added */
-  margin-left: -50vw;  /* Added */
-  margin-right: -50vw;  /* Added */
-  margin-bottom: 20px;  /* Added */
-  margin-top: -10px;  /* Added */
+  background-position: center;
+  aspect-ratio: 2600 / 866;
+  width: 100%;
+  margin-bottom: 20px;
+  margin-top: -10px;
+}
+
+#banner-exchange {
+  background-size: cover;
+  background-position: center;
+  padding-top: 18.7%;  /* 487/2600 — preserves natural aspect ratio */
+  width: 100%;         /* stays within content column, no full-bleed */
+  margin-bottom: 20px;
+  margin-top: -10px;
 }
 
 .publications-div {

blog/index.html

@@ -15,20 +15,7 @@
 
 <div class="post">
 
-  <div id="banner" style="
-      background: url(/assets/img/banner/News_and_Events_Banner.png) no-repeat center center;
-      background-size: cover;
-      height: 500px; 
-      width: 100vw; 
-      position: relative; 
-      left: 50%; 
-      right: 50%; 
-      margin-left: -50vw; 
-      margin-right: -50vw; 
-      margin-bottom: 20px; 
-      margin-top: -10px;">
-  </div>
-  
+  <div id="banner-other" style="background-image: url('/assets/img/banner/News_and_Events_Banner.png');"></div>
 
   {% if site.display_tags %}
   <div class="tag-list">