Pricing Page

- fix horizontal scroll issue on Safari iOS
SumeyraBulut · Dec 26, 2023 · 72d1d54 · 72d1d54
1 parent ae78279
commit 72d1d54
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/routes/pricing/compare-plans.svelte b/src/routes/pricing/compare-plans.svelte
@@ -351,7 +351,7 @@
                     </div>
 
                     <div
-                        class="aw-is-not-mobile aw-u-grid-auto-column-1fr is-with-footer-border u-gap-32 aw-u-padding-inline-8 aw-u-margin-inline-8-negative aw-u-filter-blur-8 u-position-sticky u-z-index-5"
+                        class="aw-is-not-mobile aw-u-grid-auto-column-1fr is-with-footer-border u-gap-32 aw-u-padding-inline-8 aw-u-margin-inline-8-negative aw-u-filter-blur-8 u-position-sticky u-z-index-5 aw-u-container-query-inline"
                         style:--inset-block-start={$isHeaderHidden ? '0px' : '70px'}
                         style:transition="inset-block-start 0.3s ease"
                     >

diff --git a/src/scss/_10-utilities.scss b/src/scss/_10-utilities.scss
@@ -167,6 +167,8 @@
 .#{$p}-u-media-cover { object-fit:cover; }
 .#{$p}-u-media-ratio-16-9 { display:block; aspect-ratio:16 / 9; object-fit:cover; }
 
+.#{$p}-u-container-query-inline { container-type:inline-size; }
+
 .#{$p}-u-list-inline-dot-sep {
   >li:nth-child(n + 2)::before { content:"·"; margin-inline-start:pxToRem(8); }
 }
@@ -177,7 +179,9 @@
     padding-block:40px;
     &::after {
       content:""; display:block; block-size:pxToRem(1);
-      inline-size:200vw; position:absolute; inset-inline-start:-500px; inset-block-start:100%; border-block-end: solid 1px hsl(var(--aw-color-smooth));
+      inline-size:100vw; position:absolute;
+      inset-inline-start: calc(calc(100vw - 100cqw)/2 * -1 + pxToRem(8));
+      inset-block-start:100%; border-block-end: solid 1px hsl(var(--aw-color-smooth));
     }
   }
 }