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:
1 parent
0d49e5acda
commit
98ec028499
3 files changed
+38
-31
No files matched your search
@@ -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
|
||||
|
||||
Reference in new issue
Block a user