SDSS-827: Adjusted Callout Quote component alignment (#209)

* SDSS-827: Adjusted Callout Quote component alignment.
SU-SWS · Aug 30, 2023 · 857eec2 · 857eec2
1 parent ed710e2
commit 857eec2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/dist/css/sdss_subtheme.css b/docroot/profiles/sdss/sdss_profile/themes/sdss_subtheme/dist/css/sdss_subtheme.css
diff --git a/...rofiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/newsroom/_callout.scss b/...rofiles/sdss/sdss_profile/themes/sdss_subtheme/src/scss/components/newsroom/_callout.scss
@@ -1,11 +1,23 @@
 @charset "UTF-8";
 
 .callout {
+  @include responsive-spacing('padding', 3 4 3 4);
+
   display: flex;
-  padding: 4.5rem 11.3rem 4.5rem 11.1rem;
 
   blockquote {
     margin: 0;
+    display: inline-block;
+  }
+
+ .blockquote-wrapper {
+    display: flex;
+    max-width: 1200px;
+    margin: 0 auto;
+
+    @include grid-media-max('sm') {
+      margin: 0;
+    }
   }
 
   .decoration {
@@ -19,6 +31,7 @@
     position: relative;
     top: -40px;
     margin-right: 1rem;
+    display: inline-block;
   }
 
   .su-callout-author {

diff --git a/...es/sdss_subtheme/templates/components/newsroom-callout/paragraph--callout-quote.html.twig b/...es/sdss_subtheme/templates/components/newsroom-callout/paragraph--callout-quote.html.twig
@@ -5,12 +5,14 @@
 
 
 <div {{ attributes }}>
-  <span class="decoration">&#8220;</span>
-  <blockquote class="callout-quote su-callout-quote">
-    <p>{{ content.su_callout_quote|render|striptags("<drupal-render-placeholder>")|trim }}</p>
-    <cite>
-    <span class="su-callout-author">{{ content.su_callout_author|render|striptags("<drupal-render-placeholder>")|trim }}</span>
-    <span class="su-callout-author-title">{{ content.su_callout_author_title|render|striptags("<drupal-render-placeholder>")|trim }}</span>
-    </cite>
-  </blockquote>
+  <div class="blockquote-wrapper">
+    <span class="decoration">&#8220;</span>
+    <blockquote class="callout-quote su-callout-quote">
+      <p>{{ content.su_callout_quote|render|striptags("<drupal-render-placeholder>")|trim }}</p>
+      <cite>
+      <span class="su-callout-author">{{ content.su_callout_author|render|striptags("<drupal-render-placeholder>")|trim }}</span>
+      <span class="su-callout-author-title">{{ content.su_callout_author_title|render|striptags("<drupal-render-placeholder>")|trim }}</span>
+      </cite>
+    </blockquote>
+  </div>
 </div>