Attempt to fix overflow problem in blockquotes

A problem was discovered in blockquotes for really long text, in
particular in the guidelines: 2305567963945518424753102147331756070. The
problem was that the number flowed outside the border. That should no
longer happen. Below is what should happen instead, though it's hard to
be sure how it will look in every case.

In Safari on a 16" MacBook Pro with Safari all across the screen it is
not a problem but shorter text will be in a smaller box (this means
the green box will vary in size depending on what is in it but this does
not seem to be a big problem).

With Safari in an old iPhone 8 Plus the box can go a bit further beyond
the screen width but text does not go beyond the boundary and one can
scroll left/right at need.

With Safari in an iPhone 14 Pro Max there is currently a cache issue but
earlier (when playing with different options) it seemed to fit and in
Simulator (in macOS) it looks good. However in Simulator earlier it was
fine even when the iPhone 14 Pro Max was not.

In responsive mode in Safari with a small width (400px) it is the same
result as the iPhone 8 Plus.

Finally with Safari in macOS with the window decreased in width it is
fine but it already was fine because it doesn't go to the size of a
phone (though it has helped fix problems with phones).

I have changed the font-style to normal (was italic) in blockquotes also
as this way italics can show up specially if requested.

The guidelines had some line breaks in the blockquotes that were
problematic; these have been removed as they are not necessary and it
did not look good either with smaller width screens.

More testing will likely be useful but it should be a lot better now.
This commit is contained in:
Cody Boone Ferguson committed 2024-07-06 09:08:19 -07:00
1 parent 0d49e5acda
commit 98ec028499
3 files changed
+38 -31

No files matched your search

+3 -2
View File
@@ -724,12 +724,13 @@ transition: all .3s ease;
blockquote {
margin: 1em 0 1em 1.7em;
padding-left: 1em;
border-top: 4px solid darkgreen;
border-left: 4px solid darkgreen;
border-bottom: 4px solid darkgreen;
border-right: 4px solid darkgreen;
font-style: italic;
font-style: normal;
overflow-wrap: break-word;
width: fit-content;
}
/* This rule makes sure that text in <blockquote><p>..</p></blockquote> is