fix(callout-quote): content off grid (#10869)

* fix(callout-quote): content off grid * fix(callout-quote): content off grid * fix(callout-quote): content off grid sm grid * fix(calout-quote): review update --------- Co-authored-by: kennylam <[email protected]> Co-authored-by: Ignacio Becerra <[email protected]> Co-authored-by: Anna Wen <[email protected]>
carbon-design-system · Oct 9, 2023 · 3f94c14 · 3f94c14
1 parent ef5e0de
commit 3f94c14
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
@@ -50,7 +50,7 @@ export default {
     (story) => html`
       <div class="bx--grid">
         <div class="bx--row">
-          <div class="bx--col-lg-11">${story()}</div>
+          <div class="bx--offset-lg-4 bx--col-lg-12">${story()}</div>
         </div>
       </div>
     `,

diff --git a/packages/web-components/src/components/callout-quote/callout-quote.scss b/packages/web-components/src/components/callout-quote/callout-quote.scss
@@ -33,3 +33,18 @@
     margin: 1rem 0.5rem;
   }
 }
+
+:host(#{$dds-prefix}-callout-quote) {
+  .#{$prefix}--quote__wrapper {
+    margin-left: -$spacing-05;
+    margin-right: -$spacing-05;
+    @include carbon--breakpoint('md') {
+      margin-left: -$spacing-05;
+      margin-right: -$spacing-05;
+    }
+    @include carbon--breakpoint('sm') {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+}