feat(podcasts): improve app logos responsiveness

freelawproject · Jan 10, 2025 · ccc9a8e · ccc9a8e
1 parent d16a214
commit ccc9a8e
Showing 1 changed file with 12 additions and 14 deletions.
diff --git a/cl/simple_pages/templates/podcasts.html b/cl/simple_pages/templates/podcasts.html
@@ -51,14 +51,12 @@ <h2>How to Subscribe</h2>
 
 
   <h3>Using a Podcast App</h3>
-  <div class="row">
-    <div class="col-xs-12">
-      <p>Our podcasts are available in a number of music services and apps. To find our podcasts, just search for "CourtListener".
-      </p>
-    </div>
-    <div class="col-xs-1"></div>
-    <div class="col-xs-2">
-      <h4 class="text-center text-uppercase gray">iTunes</h4>
+  <p>
+    Our podcasts are available in a number of music services and apps. To find our podcasts, just search for "CourtListener".
+  </p>
+  <div class="flex justify-content-center" style="flex-wrap: wrap">
+    <div class="col-sm-2 col-xs-5" style="padding: 15px; max-width: 190px">
+      <h5 class="text-center text-uppercase gray">iTunes</h5>
       <a href="https://www.apple.com/itunes/">
         <img src="{% static "png/itunes.png" %}"
              alt="iTunes Logo"
@@ -67,8 +65,8 @@ <h4 class="text-center text-uppercase gray">iTunes</h4>
              width="200">
       </a>
     </div>
-    <div class="col-xs-2">
-      <h4 class="text-center text-uppercase gray">Google Music</h4>
+    <div class="col-sm-2 col-xs-5" style="padding: 15px; max-width: 190px">
+      <h5 class="text-center text-uppercase gray">Google Music</h5>
       <a href="https://play.google.com/music/">
         <img src="{% static "svg/play_music_triangle.svg" %}"
              alt="Google Play Logo"
@@ -78,8 +76,8 @@ <h4 class="text-center text-uppercase gray">Google Music</h4>
       </a>
     </div>
 
-    <div class="col-xs-2">
-      <h4 class="text-center text-uppercase gray">Pocket Casts</h4>
+    <div class="col-sm-2 col-xs-5" style="padding: 15px; max-width: 190px">
+      <h5 class="text-center text-uppercase gray">Pocket Casts</h5>
       <a href="https://pocketcasts.com">
         <img src="{% static "png/pocketcasts_200x200.png" %}"
              alt="Pocket Casts Logo"
@@ -89,8 +87,8 @@ <h4 class="text-center text-uppercase gray">Pocket Casts</h4>
       </a>
     </div>
 
-    <div class="col-xs-2">
-      <h4 class="text-center text-uppercase gray">PlayerFM</h4>
+    <div class="col-sm-2 col-xs-5" style="padding: 15px; max-width: 190px">
+      <h5 class="text-center text-uppercase gray">PlayerFM</h5>
       <a href="https://player.fm">
         <img src="{% static "png/playerfm_200x200.png" %}"
              alt="PlayerFM Logo"