Images not responsive on mobile

[youarehou]

NOTE: Before you start, the following should be completed.

• Read Wiki to understand the usage and the correct effect of functional design.
• Make sure no similar issue(including closed ones) exists.
• Try to find the answer on Jekyll Forum and StackOverflow.

Images not responsive on mobile

All is well when the site is served up locally, and when committed to GitHub and viewed on a laptop browser.

But images don't appear to behave responsively on mobile.

Site architecture: Ruby 2.7.8, Jekyll 4.3.2, Chirpy theme

Mobile: iOS 14.4.1, Safari

Example 1:

The JPG and PNG with the newspapers and lawmakers behave responsively on the computer (link). But they stretch vertically on mobile:

Example 2:

The SVG with the seal behaves responsively on the computer (link). While it maintains its aspect ratio on mobile, there is a large amount of empty space above and below the SVG, and the custom fonts are not displaying in the seal:

[youarehou]

Update: Looks like more recent versions of iOS serve up site images just fine. Do you encounter any image distortions when you view either page on mobile?:

https://youarehou.github.io/posts/tx-ag-impeached/

https://youarehou.github.io/about/

[Cesarv123]

Add a media, and change the width and height to the photos

[youarehou]

Thanks for taking a look. Did either page work for you on your phone?

If I establish a width and height, I understand it would work on phone, but would it still be responsive to browser width on desktop?

[Cesarv123]

yeah. i believe when you set a media lets say you do

@media (max-width: 480px) { (change your image sizes) }

it should fix your images to fit the screen to phones as well but anything over 480px of width (which is a laptop or desktop) will show normally how you wanted your code to be.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Cesarv123]

Sorry I just seen this I'm really late did you fix your issue? Did it work?

[Cesarv123]

Ok so it did?? Nice