Blog book clipped on left side when window width is small and contents have an image; Image resizing test program

Last updated on 27 April 2024

27 Apr. 2024 Update

I later understood that the fundamental issue for left side clipping of Blog book was due to display:flex declaration followed by justify-content:center declaration applied to body element of blogbook through CSS class blogbook. For more on this issue and the solution, please see my post. However, the sections below of this post continue to be relevant as the blog book should ideally squash images larger than window width to window width and thus have no horizontal scrollbar in the window due to large images.

end 27 Apr. 2024 Update

22 Apr. 2024 Update

Now I could spot a horizontal scrolling issue  for the blog book only when window width is less than 270px. I felt that I need not spend time to investigate why this is happening (due to image or due to pre or due to something else) as I think I can presume a minimum of around 360px window width even on mobile portrait mode. 

end-Update

In my on-going Barebones Blogger Blog Feed to HTML Book program, I had decided to focus only on non-mobile usage (desktop/laptop/tablet) and designed and tested the program suitably. However, the program does load on mobile as well but its user interface has issues.

I decided to investigate the mobile portrait mode horizontal clipping of blog book issue that I am facing. Given below are the related pics from running the program on my Samsung M21 mobile:

[On PC desktop/laptop, to open pic in larger resolution (if available), right-click on pic followed by open link (NOT image) in new tab/window. In new tab/window you may have to click on pic to zoom in.]

Above pic: Blog book clipped on mobile portrait mode

Above pic: Blog book not clipped on mobile landscape mode. Note that the black strip on the left is not shown on mobile but got added when I took the screenshot on mobile.

I am curious to know why this is happening. So I will invest some time exploring this. I think the issue came up due to my trying out some img tag related CSS code where I was setting width (100%, 100vw, 90% etc.) and using object-fit (contain, cover). Now I have commented out that code. Instead I have noted that for my blogs, in output blogbook, around 760 px seems to be a minimum width for proper margins to appear. Reducing width further seems to reduce the margins initially and around 690 px horizontal scrollbar starts appearing. I have set min-width for blogbook in CSS to 760px. [See 10 Apr. 2024 Update below that disagrees with following statement:] That forces a horizontal scrollbar to appear at close to 800 px and the display is OK even for simulated mobile in Portrait mode in Chrome DevTools! 

I don't want to spend too much time on this and since I seem to have a solution, unless some new issues come up, I will go along with current code. One point though is I don't know if some other blogs' blogbooks will face similar issues. min-width of 760px may work for my blogs but may not work for other blogs. I think I will consider doing something about it when I encounter such issues. 

============

10 Apr. 2024 Update:

Unfortunately, the min-width 760px setting does not solve the left side clipping of blog book when desktop window width is small (e.g. 655 px) even if horizontal scrollbar does appear. The question is why does horizontal scrollbar not allow for scrolling to extreme left of blog book. I don't have an answer for it so far. [The '27 Apr. 2024 Update' section given at top of post explains the cause of the problem in short and links to a detailed post.]

In fact, if min-width 760px is specified, even only text blog book (no image) faces left side clipping when desktop window width is small (e.g. 655 px) even if horizontal scrollbar does appear. Removing the min-width specification, resolves the issue for text only blog book - no horizontal scrollbar appears and text is properly wrapped in the display for desktop window width of not only 655 px but even 483 px (or even 190 px width done using Chrome DevTools).

In one test, I saw that, for my blogs, the maximum width attribute for an image in HTML (not CSS) was 320 (usually I have 640 px width attribute image in my HTML blog books). 

Associated img element in HTML blog book:  <img border="0" data-original-height="738" data-original-width="1600" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuxrI4zrYYmbhvabGUMLkY_kIgjPxJOIiw6H6dgL7zGxurnbeQiMdJclpuVooS8kA3oQAyp85_JBSTJS9Z-CoZITWPpnoE1Tze_mmSgxwiTN-QEfOIvibwTVUFONijS357ta_OARBRDdb3WE7PPYSJW5FbW95IA4WOUgfm52CRDa9sh4pAkf8xS-mKzoVr/s320/20240407-BlogBook-OK-On-Mobile-Landscape.jpeg" width="320">

In this scenario, the horizontal scrollbar does not appear till window width is around 351 px. [Margin is 8 px on left and right, padding is 20 px on left and right.] Till horizontal scrollbar appears, there is no clipping of left side of blogbook though the margin/padding on left starts reducing as the width gets close to 351. Once horizontal scrollbar appears, the blogbook starts getting clipped on the left. The image does NOT get squashed or clipped even when no object-fit CSS is specified. Is this due to width specification for image as 320 in the HTML itself?

I created a simple html, css and single image project with the image being very large (3024x4030). I did not use any width setting in the img tag in HTML and did not have any CSS code. The image showed up in its original width (and height, I guess) and a horizontal scroll bar appeared using which one could see the whole image. Interestingly, the text in paragraph tags above and below the image fit the window width with text wrapping around. So the horizontal scrollbar was not needed to view the text and when one scrolled to the right to see parts of the image part of the text starting going out of view on the left. Inspecting the elements and CSS showed that width of the html, body, div and paragraph elements were all window width but image element alone had large width equal to width of original image.

To have the image get squashed to window size, I had to use img tag width is 100% in CSS file. It squashed the image properly even when I used DevTools to reduce window width to around 133 px. No horizontal scroll bar appeared and the text got wrapped around correctly without any clipping (on left or right side). So at least for simple HTML and CSS solution, width set to 100% for img tag is the solution. 

But what if the HTML img element has a width specification? I tried that with width="640" in the img element in HTML in this small test project. There was no scrolling issue! It seems that width set to 100% for img element in CSS overrides the width="640" in HTML img element.

Commenting out the width set to 100% in CSS and making the window width small (like around 345 px) results in a horizontal scroll bar appearing which can be used to view the whole image. The text fits into the window and wraps around correctly.

I uncommented the width set to 100% in CSS. Then I made the main container a flex box. That did not impact the image getting squashed properly when window width was reduced.

I later realized that I should set max-width to 100% and not width as setting width results in images smaller than window width to be expanded to 100%. It did not come into play in the earlier version of my test program as the image width in it was larger than maximum window width on my desktop computer. Even in current version of the test program, the image used has original width which is the max width of window on my desktop computer (as image is a screenshot of my desktop PC), but as there is a width specification of 1200 in the HTML, the image is squashed to 1200 pixels if window width is greater that 1200 + margins & padding.

I modified my simple test program slightly and used a screenshot of VSCode with that test program open as my test image and have shared the index.html and styles.css on Github Gist. The image is shared in a comment on same gist. The image has to be downloaded and saved as pic1.jpg in same directory as index.html and styles.css, for the simple project to work.

Given below are screenshots of the test program demonstrating how image gets resized correctly.

[On PC desktop/laptop, to open pics in sequence in somewhat larger resolution, click on image and then use right arrow/left arrow. To open pic in full resolution, right-click on pic followed by open link (NOT image) in new tab/window. In new tab/window you may have to click on pic to zoom in.]

I tried max-width set to 100% for img element in CSS in the blogbook program. It seems to work. The blog book does not get clipped on left side when window width is small (mobile portrait size or even smaller window width like 150 px created through DevTools) and contents have an image.