Fix image in border-box for mobile?

moderndive · Oct 29, 2024 · d516e1f · d516e1f
1 parent 68d7555
commit d516e1f
Showing 1 changed file with 5 additions and 5 deletions.
diff --git a/_includes/logo.html b/_includes/logo.html
@@ -1,17 +1,17 @@
 <html>
-  <img src='https://moderndive.com/wide_format.png' alt="ModernDive">
+  <img src='https://moderndive.com/wide_format.png' alt="ModernDive" style="width: 100%; max-width: 100%;">
 
   <div id="border-box-container" class="border-box" style="display: none;">
-    <div class="text-image-container">
-      <div class="text">
+    <div class="text-image-container" style="display: flex; flex-wrap: wrap; align-items: center; gap: 10px;">
+      <div class="text" style="flex: 1;">
         This version isn't the most recent version of the book. We recommend the Second Edition at
         <a href="https://moderndive.com/v2/">https://moderndive.com/v2/</a>, which was finalized in Fall 2024 to be published as a hard copy in early 2025 by CRC Press.
         You can find a summary of the updates in the Second Edition
         <a href="https://moderndive.com/v2/preface.html#about-the-book">here</a>.
       </div>
-      <div class="image">
+      <div class="image" style="flex: 0 1 250px; max-width: 100%;">
         <a href="https://moderndive.com/v2/">
-          <img src="images/logos/v2_cover.jpg" alt="Second Edition website" width="250" height="375"/>
+          <img src="images/logos/v2_cover.jpg" alt="Second Edition website" style="width: 100%; height: auto;"/>
         </a>
       </div>
     </div>