fix: fix wrapper__wide element

The wrapper wide was smaller than the actual wrapper on screens less than xl
hex-digital · Dec 28, 2020 · c4380b3 · c4380b3
1 parent bb5f974
commit c4380b3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/src/objects/wrapper.js b/src/objects/wrapper.js
@@ -78,9 +78,11 @@ module.exports = function ({ addComponents, config, theme, variants, e }) {
         ...generatePaddingFor(0),
 
         '&__wide': {
-          marginLeft: 'calc(-75vw / 2 + 100% / 2)',
-          marginRight: 'calc(-75vw / 2 + 100% / 2)',
-          maxWidth: 'none',
+          maxWidth: '100vw',
+          '@screen xl': {
+            marginLeft: 'calc(-90vw / 2 + 100% / 2)',
+            marginRight: 'calc(-90vw / 2 + 100% / 2)',
+          },
         },
         '&__bleed': {
           marginLeft: 'calc(-100vw / 2 + 100% / 2)',

diff --git a/test/src/index.html b/test/src/index.html
@@ -27,6 +27,8 @@ <h1 class="u-text-blue-500 u-mb-4">Lorem Ipsum</h1>
         eleifend, tempus est eu, facilisis turpis. Duis quis sagittis libero. Donec vitae eros ac turpis mattis
         vulputate.</p>
     </div>
+    <div class="u-p-12 u-bg-indigo-300 u-wrapper__wide">This is a wide wrapper</div>
+    <div class="u-p-12 u-bg-blue-300 u-wrapper__bleed">This is a bleed wrapper</div>
   </div>
 </div>
 </body>