This post currently simply captures some notes I have made on this issue and one solution for it. These notes are not organized. Time permitting I will try to improve organization of this post.
For images with 640px width specification in a blog post, in Blogger Feed To HTML Book App (BFTB) when blogbook page CSS has a 'max-width: 100%' declaration for img elements, the blogbook page shows a horizontal scrollbar at window width less than around 700 px. If the blogbook page CSS declaration for img elements is changed to 'max-width: 90%', the horizontal scrollbar appears at only below around 160px width! Ideally the app. should not show horizontal scrollbar at 360px and above as then the app. will display in most mobile portrait mode screens without horizontal scrollbar.
Earlier I did not have time to investigate why exactly the above was happening, and so was going with 'max-width: 90%' in the BFTB app. Recently I spent some time to investigate the issue and this post captures that investigation.
....
The tests in this note were done on 27 & 28 Apr. 2024 and the associated blog post that I investigated having the 640px image which caused the horizontal scrollbar at window width < 700px is: BFTB App: Rare error on creating new window followed by calling JS function of window.opener to write to new window; Related test program, https://raviswdev.blogspot.com/2024/04/bftb-app-rare-error-on-creating.html.
For max-width 100%, for Blog feed script src URI: https://raviswdev.blogspot.com/feeds/posts/default/?max-results=25&alt=json-in-script&callback=handleFeed :
Horizontal scrollbar appears at around 710 to 720 px window width. (No left side clipping)
==============
But for max-width 90%, for Blog feed script src URI: https://raviswdev.blogspot.com/feeds/posts/default/?max-results=25&alt=json-in-script&callback=handleFeed :
Horizontal scrollbar appears only below around 160 px window width!
At around 710px (710.55px) width, no horizontal scrollbar (but there is a vertical scrollbar):
html width: 695.27 (note that the vertical scrollbar is outside the html element (as shown in Chrome DevTools)).
body with padding width: 679.27 (note padding is 20px left and right and there is a margin of 8 px on left and right)
main (element) width : 639.27 (0 padding, 0 margin) (639.27 * 0.9 = 575.343 and so the max-width)
An image of HTML attribute width of 640 px (and original width of 1920 px) is squeezed to 575.341
...
I created a blog book for the above URI and started zooming in to a blogpost with an image showing the issue, deleting other content. Eventually I was able to have a small HTML file demonstrating the problem which had mainly the anchor and image elements of the blog post mentioned earlier. In this file, the problem of horizontal scrollbar came up at window width < 700px.
The cause is the anchor element within which the Blogger img element is contained, has a margin as shown by its style statement below:
style="margin-left: 1em; margin-right: 1em"
----
Once the above style is removed, the horizontal scrollbar issue does not appear for the same image contained in an anchor element. Even at 200 px width, the horizontal scrollbar is not shown. But removing style from HTML blog post is not a feasible solution for BFTB app.
I did some further modifications and tests and main observations from them are:
- When CSS main-book img selector has declaration: 'max-width: 90%;', horizontal scrollbar appears at very low window width (less than 200px) and so no problem.
- When CSS 'main-book img' selector has declaration: 'max-width: 100%;', horizontal scrollbar appears at medium window width (less than 700px) and so there is a problem.
- When CSS 'main-book img' selector has declaration: 'max-width: 100%;' and 'main-book a' selector sets margin to 0 and uses 'important', horizontal scrollbar appears at very low window width (less than 200px) and so no problem
The key CSS code for the solution (point 3 above) is:
.main-book {
max-width: 100%;
}
.main-book img {
max-width: 100%;
}
.main-book a {
margin-left: 0 !important;
margin-right: 0 !important;
}
---
I also tried out 100vw for img max-width. As expected, it did not solve the issue of horizontal scrollbar appearing at less than around 700px.
....
I checked how Google Blogger displayed the blog post mentioned earlier:
https://raviswdev.blogspot.com/2024/04/bftb-app-rare-error-on-creating.html, on window width less than around 700px, and saw that Google Blogger also shows a horizontal scrollbar at such window width! I tried it out on mobile and saw that there is small amount of horizontal scrolling on swipe in mobile portrait mode (window width around 360px). I have to say I was a little disappointed that Google Blogger also was facing this issue. Why have the margin for the anchor element in which the image is contained, in the first place? I don't know enough of web page HTML & CSS design to answer this question now.
Comments
Post a Comment