Merge pull request #672 from FitzwilliamMuseum/hotfix/FITZ-29-exhibit…

…ion-page-updates

fix: exhibition page mobile updates

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
     "/js/app.js": "/js/app.js?id=186fc5ec23f2fa6f870cee9d2ef7b85f",
-    "/css/app.css": "/css/app.css?id=ec346c1778024655a01476995a95c7b9",
-    "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=f653ba28c0fceab79c1ee951b255cb11"
+    "/css/app.css": "/css/app.css?id=03b6d0dd84cb9c26f58950ceac7324a4",
+    "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=e493c879a65ba13d5709fc80688f8d84"
 }

resources/css/site.css

@@ -1032,7 +1032,7 @@ a.text-center.btn.btn-outline-light.btn__book {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(auto, 200px));
     justify-content: space-between;
-    padding: 0 12px 24px 12px;
+    padding: 0 16px 24px 16px;
 }
 
 .fitz-footer:nth-child(2),
@@ -1065,13 +1065,6 @@ a.text-center.btn.btn-outline-light.btn__book {
     }
 }
 
-@media screen and (min-width: 1290px) {
-    .container:not(.container.container-subscribre),
-    .container-fluid {
-        padding-left: 0;
-        padding-right: 0;
-    }
-}
 .exhibition .card-header,
 .exhibition .card,
 .exhibition .card:hover,

resources/sass/_extend-bootstrap.scss

@@ -4,4 +4,9 @@
 
 .mb-4-5 {
     margin-bottom: 28px;
-}
+}
+
+.container,
+.container-fluid {
+    --bs-gutter-x: 2rem;
+}

resources/sass/exhibition/_cta.scss

@@ -1,49 +1,70 @@
 .exhibition-cta {
-    max-width: 1290px;
-    margin: 0 auto;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    margin: 60px auto 0 auto;
+    max-width: 1290px;
+    padding: 32px 0;
+    width: 100%;
+
+    @media screen and (min-width: 768px) {
+        flex-direction: row;
+        gap: 36px;
 
-    & .wrapper {
-        max-width: 341px;
+        & > :first-child {
+            max-width: 341px;
+            width: 100%;
+        }
+
+        & > :nth-child(2) {
+            max-width: 720px;
+            width: 100%;
+            margin: 0;
+        }
+    }
+}
+
+.exhibition-cta .support-cta {
+    margin-top: 0;
+    & .cta-btn,
+    & .exhibition-cta-link {
+        max-width: fit-content;
         width: 100%;
     }
+}
 
-    &-copy.cta-copy {
+.exhibition-cta .container.support-text-component.support-cta {
+    max-width: 100%;
+    width: 100%;
+    @media screen and (min-width: 768px) {
         max-width: 297px;
-        margin-bottom: 20px;
         width: 100%;
+        padding: 0 16px;
+    }
+    @media screen and (min-width: 1320px) {
+        padding: 0;
     }
 }
+.exhibition-cta .container.support-text-component.exhibition-text-component {
+    max-width: 100%;
+    width: 100%;
+    @media screen and (min-width: 768px){
+        max-width: 664px;
+        width: 100%;
+        padding: 0 16px;
+    }
+    @media screen and (min-width: 1320px) {
+        padding: 0;
+    }
 
-div.mb-0 {
-    margin-bottom: 0;
 }
 
 .exhibition-cta-link {
-    display: inline-block;
-    margin-top: 28px;
     color: #000;
-    text-decoration: underline;
+    display: block;
     font-size: 18px;
-}
-
-.exhibition .exhibition-text-component {
-    max-width: 720px;
-    padding-right: 65px;
-    width: 100%;
-}
-
-.support-text-component h2,
-.exhibition-text-component h2 {
-    font-weight: 400;
-    font-size: 24px;
-    line-height: 28px;
-    // margin-bottom: 36px;
-}
-
-.exhibition-text-component p {
-    font-size: 17px;
+    margin-bottom: 56px;
+    margin-top: 28px;
+    text-decoration: underline;
 }
 
 // Promo CTA - Exhibition Single Page

resources/sass/support-us/_featured-image.scss

@@ -4,7 +4,7 @@
     margin: 56px auto;
     padding: 0 16px;
 
-    @media screen and (min-width: 1024px) {
+    @media screen and (min-width: 1320px) {
         padding: 0;
     }
 }

resources/sass/support-us/_featured-video.scss

@@ -1,8 +1,11 @@
 /* featured-video-component start */
 .featured_video {
     max-width: 1290px;
-    padding: 0 120px;
     margin: 56px auto;
+
+    @media screen and (min-width: 1320px) {
+        padding: 0;
+    }
 }
 
 /* featured-video-component end */

resources/sass/support-us/_grid.scss

@@ -48,7 +48,7 @@
 
 .container.support-grid {
     margin: 60px auto;
-    padding: 0 12px;
+    padding: 0 16px;
 }
 
 .container.support-grid .card-body {

resources/sass/support-us/_nav.scss

@@ -7,10 +7,9 @@
 }
 .navbar .container-fluid {
     max-width: 1290px;
-    padding: 0 12px;
     height: 100%;
 
-    @media screen and (min-width: 1290px) {
+    @media screen and (min-width: 1320px) {
         padding: 0;
     }
 }

resources/sass/support-us/_related-content.scss

@@ -12,7 +12,7 @@
 .related .related-container {
     max-width: 1314px;
     margin: 0 auto;
-    padding: 0 12px;
+    padding: 0 16px;
 }
 
 .related .related-title {

resources/sass/support-us/_support-home-cards.scss

@@ -1,5 +1,5 @@
 .container-home-cards.container-support-cards {
-    padding: 0 12px;
+    padding: 0 16px;
 }
 
 .row.row-home.row-support {

resources/views/components/exhibition-cta.blade.php

@@ -1,6 +1,5 @@
 <div class="exhibition-cta">
-    <div class="wrapper">
-        <div class="container col-max-800 mx-auto support-text-component support-cta mb-0">
+        <div class="container support-text-component support-cta mb-0">
             <h2 class="cta-title exhibition-cta-title">Pay what you wish</h2>
             <p class="cta-copy exhibition-cta-copy">Our exhibitions and displays remain free but you can now choose to make a donation.</p>
             @if(!empty($exhibition['exhibition_url']))
@@ -11,11 +10,10 @@
             @else
                 <p class="cta-btn">Tickets available soon...</p>
             @endif
+            <a class="exhibition-cta-link" href="/plan-your-visit">Plan your visit</a>
         </div>
-        <a class="exhibition-cta-link" href="/plan-your-visit">Plan your visit</a>
-    </div>
     @if(!empty($exhibition['exhibition_narrative']) || !empty($exhibition['promo_cta']))
-        <div class="col-max-800 mx-auto support-text-component exhibition-text-component">
+        <div class="container support-text-component exhibition-text-component">
             @if(!empty($exhibition['exhibition_narrative']))
                 @markdown($exhibition['exhibition_narrative'])
             @endif