BFTB App: Current CSS code and tests to minimize appearance of horizontal scrollbar in blogbook window
Last updated on 29 Apr. 2024
In Blogger Feed To HTML Book App (BFTB), the updated key CSS code (as of 28 Apr. 2024) in blogbook page to minimize appearance of horizontal scrollbar in blogbook window is as follows (blogbook is the class used by body element; body element has one main element and two script elements; main-book is the class used by the main element; blogbook page source code):
.blogbook {
padding-left: 20px;
padding-right: 20px;
display: flex;
align-items: center;
word-break: break-word;
word-wrap: break-word;
}
...
.main-book {
max-width: min(100%, 1200px);
margin: auto;
}
.main-book img {
max-width: 100%;
}
.main-book a {
margin-left: 0 !important;
margin-right: 0 !important;
}
.main-book pre {
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
.main-book span {
white-space: pre-wrap !important;
}
----
For current version of BFTB app., the associated Github commit is "Improved main-book max-width CSS declaration by using calc".
...
Using BFTB app. with above changes, test data for horizontal scroll bar appearance window width for some of my blogger blogs and one other blog, are given below:
----------
Blog feed script src URI: https://raviswdev.blogspot.com/feeds/posts/default/?max-results=25&alt=json-in-script&callback=handleFeed
Number of posts returned: 25
Horiz scrollbar appears at window width less than around 140px
-----------
Blog feed script src URI: https://raviswdev.blogspot.com/feeds/posts/default/?max-results=150&alt=json-in-script&callback=handleFeed
Number of posts returned: 94
Horiz scrollbar appears at window width less than around 285px
-----------
Blog feed script src URI: https://ravisiyer.blogspot.com/feeds/posts/default/?max-results=25&alt=json-in-script&callback=handleFeed
Number of posts returned: 25
Horiz scrollbar appears at window width less than around 140px
-----------
Blog feed script src URI: https://ravisiyer.blogspot.com/feeds/posts/default/?max-results=150&alt=json-in-script&callback=handleFeed
Number of posts returned: 150
Horiz scrollbar appears at window width less than around 366px
-----------
Blog feed script src URI: https://ravisiyermisc.blogspot.com/feeds/posts/default/?max-results=150&alt=json-in-script&callback=handleFeed
Number of posts returned: 150
Horiz scrollbar appears at window width less than around 290px
----------
Blog feed script src URI: https://ravisiyermisc.blogspot.com/feeds/posts/default/?max-results=25&alt=json-in-script&callback=handleFeed
Number of posts returned: 25
Horiz scrollbar appears at window width less than around 150px
----------
Blog feed script src URI: https://sathyasaiwithstudents.blogspot.com/feeds/posts/default/?max-results=150&alt=json-in-script&callback=handleFeed
Number of posts returned: 150
Horiz scrollbar does not appear even at lowest Chrome DevTools window width of less than around 137px
============ end of test data ============
I think the BFTB app. is doing OK given the above tests. I tested the horizontal scrollbar appearing at less than around 366px case (https://ravisiyer.blogspot.com/feeds/posts/default/?max-results=150&alt=json-in-script&callback=handleFeed) on my Samsung mobile in portrait mode and it displays without any horizonal scroll on swipe to left. So I don't think I should invest time in figuring out why horizontal scrollbar appears for window width less than 366px.
Comments
Post a Comment