From f4fbd5a28f839d851c92016f5d2a43662beeef10 Mon Sep 17 00:00:00 2001 From: David Norton Date: Mon, 28 Dec 2020 12:40:36 -0600 Subject: Add autoscaling of images to mobile browsers Currently, on mobile devices that are not wide enough for the images in the blog, the image sets the max width of the blog and downscales all the text relative to it, leading to crushed text and a large empty space on the right side. I've reproduced this using Google Chrome developer tools, setting the device mode to emulate an iPhone X, but it appears to occur any time the mobile device has a screen width smaller than the image to be displayed. The code change here hints that the max width of the image should be 100% of the screen width, not an absolute number of pixels, and the height will be automatically adjusted to maintain the image aspect ratio. --- static/css/style.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'static/css/style.css') diff --git a/static/css/style.css b/static/css/style.css index 6426d6f..defde73 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -6,6 +6,11 @@ body { font-family: helvetica, arial, sans-serif; } +img { + max-width: 100%; + height: auto; +} + h1, h2, h3, h4, h5, h6 { margin-bottom: 0; line-height: 1.2em; -- cgit v1.2.3