Conferences: Make hero more responsive

newamericafoundation · Jul 15, 2024 · 0d26020 · 0d26020
1 parent 380c29c
commit 0d26020
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/conference/templates/conference/intro.html b/conference/templates/conference/intro.html
@@ -2,7 +2,7 @@
 {% load wagtailimages_tags %}
 
 {% image page.story_image original as cover %}
-<section id="hero" class="conference__intro" style="background: url({{cover.url}}) no-repeat center/cover fixed">
+<section id="hero" class="conference__intro" style="background: black url({{cover.url}}) no-repeat center/cover fixed">
   <div class="heading-block centered-block align-center">
       <div class="conference__title">
         <div class="na-logo">
@@ -17,8 +17,8 @@
           {% endif %}
           </a>
       	</div>
-        <div class="conference__title__location-date row">
-          <h4 class="white margin-0 col-6" style="text-align:right">
+        <div class="conference__title__location-date">
+          <h4 class="white">
             <span>
               <span class="fa fa-calendar base-clr-txt" style="padding-right: 10px;"></span>
               {% if page.end_date %}
@@ -28,7 +28,7 @@ <h4 class="white margin-0 col-6" style="text-align:right">
               {% endif %}
             </span>
           </h4>
-          <h4 class="white margin-0 col-6">
+          <h4 class="white">
             <span>
               <span class="fa fa-location-dot base-clr-txt" style="padding-right: 10px;"></span>
               {{page.city}}, {{page.state}}
@@ -49,7 +49,7 @@ <h6 class="pullquote white centered">{{ page.subheading }}</h6>
           {% elif page.rsvp_link %}
             <a href="{{page.rsvp_link}}" target="_blank" rel="noopener noreferrer" class="button white-outline" style="width:175px;">Register</a>
           {% endif %}
-            <a href="#about" class="button white-outline" style="width:175px;">About </a>
+            <a href="#about" class="button white-outline margin-10" style="width:175px;">About </a>
         </div>
       </div>
 

diff --git a/newamericadotorg/assets/scss/pages/conference/_intro.scss b/newamericadotorg/assets/scss/pages/conference/_intro.scss
@@ -18,14 +18,22 @@
     left: 50%;
     @include transform(translateX(-50%));
     position: absolute;
-    top: -45px;
+    top: 0;
 
     @media (min-width: 430px){
       max-width: 400px;
     }
   }
 }
 
+.conference__title__location-date {
+  text-align: center;
+  > h4 {
+    display: inline-block;
+    margin: 10px;
+  }
+}
+
 .conference__title__image {
   display: block;
   max-width: 60%;