ngn/anonymous_overflow
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Activity

Set maximum width to 40rem across screen sizes (#111)

Browse Source 
* Set maximum width to 40rem across screen sizes

Some rules are removed to correct the bounding box size
in browser inspector and fix the overflow on the x-axis.

* Remove unused div.parent

(The diff should be viewed --ignore-all-space)
This commit is contained in:
McSinyx 2024-04-25 14:09:43 +09:00 committed by GitHub
parent 3a508ddbd4
commit e020639a3b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 100 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/globals.css
View File

@ -29,10 +29,23 @@ a {
}
html {
margin: auto;
max-width: 40rem;
}
@media only screen and (max-width: calc(40rem + 2rem)) {
body {
padding-left: 1rem;
padding-right: 1rem;
}
}
body {
background-color: var(--main-bg);
color: var(--text-color);
font-family: sans-serif;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
.icon {

20
public/home.css
View File

@ -1,21 +1,10 @@
body {
background-color: var(--main-bg);
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
color: var(--text-color);
}
.container {
width: 40rem;
margin: auto;
}
.footer {
@ -104,10 +93,3 @@ body {
width: 2rem;
height: 2rem;
}
@media screen and (max-width: 800px) {
body {
padding: 1rem;
box-sizing: border-box;
}
}

37
public/question.css
View File

@ -1,35 +1,5 @@
body {
margin: 0;
width: 100vw;
height: 100vh;
overflow-x: hidden;
background-color: var(--main-bg);
color: var(--text-color);
font-family: sans-serif;
display: flex;
justify-content: center;
padding-left: 5rem;
padding-right: 5rem;
padding-top: 2rem;
box-sizing: border-box;
}
@media (orientation: landscape) {
.parent {
max-width: 50%;
width: fit-content;
}
}
@media (orientation: portrait) {
.parent {
max-width: 90%;
width: fit-content;
}
}
.header {
@ -195,10 +165,3 @@ img {
justify-content: center;
align-items: center;
}
@media only screen and (max-width: 800px) {
body {
padding-left: 1rem;
padding-right: 1rem;
}
}

2
templates/question.html
View File

@ -21,7 +21,6 @@
<script defer src="/static/question.js" type="text/javascript"></script>
</head>
<body>
<div class="parent">
<div class="header">
<a href="/" class="logo-link">
<img
@ -106,6 +105,5 @@
{{end}}
</div>
{{ end }}
</div>
</body>
</html>