Fix responsiveness of the keynote name

pyladies · Oct 31, 2023 · 1fd93fb · 1fd93fb
1 parent 7c75572
commit 1fd93fb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 54 deletions.
diff --git a/css/style.css b/css/style.css
@@ -423,13 +423,6 @@ h1, h2, h3, h4, h5 {
   border-bottom-left-radius: calc(0.25rem - 1px);
 }
 
-.card-keynote .card-title {
-  width: 50%;
-  background-color: var(--py-lady-pink);
-  padding: 8px;
-  font-size: 95%;
-}
-
 .card-text {
   font-size: 90%;
 }
@@ -438,57 +431,26 @@ h1, h2, h3, h4, h5 {
   position: relative;
 }
 
+.card-img-container {
+  position: relative;
+}
+
+.bottom-right {
+  position: absolute;
+  bottom: 10px;
+  right: 0px;
+  background-color: var(--py-lady-pink);
+  padding: 8px;
+  width: 90%;
+}
+
 @media only screen and (max-width: 600px) {
   .card-keynote {
     flex-direction: column;
   }
   .card-keynote img {
     width: 100%;
   }
-
-  .card-keynote .card-title {
-    width: 100%;
-  }
-
-  .card-img-overlay {
-    height: 500px !important;
-  }
-}
-
-@media only screen and (max-width: 500px) {
-  .card-img-overlay {
-    height: 380px !important;
-  }
-}
-
-@media only screen and (max-width: 425px) {
-  .card-img-overlay {
-    height: 300px !important;
-  }
-}
-
-@media only screen and (max-width: 393px) {
-  .card-img-overlay {
-    height: 280px !important;
-  }
-}
-
-@media only screen and (max-width: 375px) {
-  .card-img-overlay {
-    height: 260px !important;
-  }
-}
-
-@media only screen and (max-width: 353px) {
-  .card-img-overlay {
-    height: 240px !important;
-  }
-}
-
-@media only screen and (max-width: 320px) {
-  .card-img-overlay {
-    height: 210px !important;
-  }
 }
 
 .card-keynote img {

diff --git a/generate_site/templates/index-base.html b/generate_site/templates/index-base.html
@@ -78,9 +78,9 @@ <h3 class="display-6 special-font">Keynotes</h3>
             {% for keynote in KEYNOTES %}
             <div class="col-12 col-xl-6 d-flex">
               <div class="card card-keynote my-3 bg-opacity-50">
-                <img src="{{ keynote['photo'] }}" class="card-img-top w-100" alt="{{ keynote['name'] }} Photo">
-                <div class="card-img-overlay h-100 d-flex flex-column justify-content-end text-start">
-                  <h5 class="card-title text-white">{{ keynote['name'] }}</h5>
+                <div class="card-img-container w-100">
+                  <img src="{{ keynote['photo'] }}" class="card-img-top" alt="{{ keynote['name'] }} Photo">
+                  <h5 class="bottom-right text-white">{{ keynote['name'] }}</h5>
                 </div>
                 <div class="card-body w-100">
                   <p class="card-text text-start">{{ '.'.join(keynote['bio'].split('.')[:2]) }}.</p>