fix: normalize page width

This commit is contained in:
Christel Westerberg
2024-11-29 14:58:13 +01:00
parent bdccce1d70
commit 329d762917
3 changed files with 26 additions and 14 deletions
@@ -1,6 +1,7 @@
.container {
display: grid;
gap: var(--Spacing-x3) var(--Spacing-x9);
width: var(--max-width-page);
}
.content {
@@ -20,10 +21,6 @@
grid-template-rows: auto 1fr;
margin: var(--Spacing-x5) auto 0;
/* simulates padding on viewport smaller than --max-width-navigation */
width: min(
calc(100dvw - (var(--Layout-Desktop-Margin-Margin-min) * 2)),
var(--max-width-navigation)
);
}
.content {
+21 -6
View File
@@ -104,6 +104,11 @@
--max-width-text-block: 49.5rem;
--current-mobile-site-header-height: 70.047px;
--max-width-navigation: 89.5rem;
--max-width-spacing: calc(var(--Layout-Mobile-Margin-Margin-min) * 2);
--max-width-page: min(
calc(100dvw - var(--max-width-spacing)),
var(--max-width-navigation)
);
--main-menu-mobile-height: 75px;
--main-menu-desktop-height: 125px;
@@ -140,15 +145,25 @@ body {
body.overflow-hidden {
overflow: hidden;
}
@media screen and (min-width: 768px) {
body.overflow-hidden {
overflow: auto;
overflow-x: hidden;
}
}
ul {
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
}
@media screen and (min-width: 768px) {
:root {
--max-width-spacing: calc(var(--Layout-Tablet-Margin-Margin-min) * 2);
}
body.overflow-hidden {
overflow: auto;
overflow-x: hidden;
}
}
@media screen and (min-width: 1367px) {
:root {
--max-width-spacing: calc(var(--Layout-Desktop-Margin-Margin-min) * 2);
}
}