tomoyanonymous/quartz-research-note
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove unnecessary scrollbars

Browse Source 
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.
This commit is contained in:
Claudio Yanes 2022-03-04 04:12:43 +00:00
parent 58b2d1dda9
commit 4e1e39bff4
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/styles/base.scss
View File

@ -238,7 +238,9 @@ body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
overflow-x: hidden; //overflow-x: hidden;
max-width: 100%;
box-sizing: border-box;
background-color: var(--light); background-color: var(--light);
} }
@ -268,10 +270,10 @@ hr {
} }
.singlePage { .singlePage {
margin: 4em 30vw; padding: 4em 30vw;
@media all and (max-width: 1200px) { @media all and (max-width: 1200px) {
margin: 25px 5vw; padding: 25px 5vw;
} }
} }