Additional fixes for narrow screens.
This time: both /blog and /managed had issues with horizontal overflow.
The content was being displayed as wider-than-the-screen,
and phone users had to pinch the phone to zoom out to see everything.
Now, everything renders within the original width of the screen.
1. Locked the maximum content width to 100% of viewport width.
This prevents the entries in /blog from being cropped on phone
screens.
2. Allowed wordbreaks to fix one entry in /blog (which contains the long
phrase: `$geographic_location_appropriate_temperature`)
3. As a final backup, added a horizontal scroll to any page content which
cannot be made narrower. This fixes the table in /managed, allowing
phone users to scroll left/right to see contact details.
NB: I think the table in /managed might look nicer, and wrap better,
as something other than a table. But I don't have a better idea yet.
NB2: This commit breaks the workaround for phones earlier, of zooming
out to see the whole table.
This commit is contained in:
@@ -199,6 +199,7 @@ footer .separator {
|
||||
.blog-archive {
|
||||
padding: 3rem 3rem;
|
||||
@media (max-width: 450px) { padding: 3rem 1rem; }
|
||||
max-width: 100vw;
|
||||
|
||||
.blog-listing {
|
||||
display: grid;
|
||||
@@ -222,14 +223,22 @@ footer .separator {
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow-x: scroll !important;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.blog-post {
|
||||
padding: 4rem 6rem;
|
||||
@media (max-width: 450px) { padding: 2.5rem 1.4rem 1rem; }
|
||||
max-width: 100vw;
|
||||
|
||||
figure {
|
||||
img.hero {
|
||||
|
||||
Reference in New Issue
Block a user