From 4e1e39bff4e3128e5bf48ba478ebbc720db61b97 Mon Sep 17 00:00:00 2001 From: Claudio Yanes Date: Fri, 4 Mar 2022 04:12:43 +0000 Subject: [PATCH] Remove unnecessary scrollbars MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The margin property can escape the parent node and move it alongside its child. This happens with singlePage div and the body, resulting in scrollbars appearing as the body has the size of the viewport but does not align with it. This phenomenon can be always observed in the vertical axis and it can also be observed in the horizontal axis when the viewport it’s not wide enough (mostly in mobile). Using paddings prevents this “extra space” from scraping and displacing the body. Also, the value 100vw does not take into account the space taken by the vertical scrollbar, thus making the body wider than the actual viewport, producing a horizontal scrollbar. --- assets/styles/base.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/assets/styles/base.scss b/assets/styles/base.scss index a462a33a..c36bac40 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -238,7 +238,9 @@ body { margin: 0; height: 100vh; width: 100vw; - overflow-x: hidden; + //overflow-x: hidden; + max-width: 100%; + box-sizing: border-box; background-color: var(--light); } @@ -268,10 +270,10 @@ hr { } .singlePage { - margin: 4em 30vw; + padding: 4em 30vw; @media all and (max-width: 1200px) { - margin: 25px 5vw; + padding: 25px 5vw; } }