Why are images on blogs and pages not optomised for mobile?

Store Design
, ,
1

Hey all.

I recently wrote a blog post and noticed that the images in the post are dreadful on mobile. They’re full-size, requiring the user to scroll horizontally to see the whole image. It should be resized and fit to screen, but it’s not.

Is there a way to ensure images in blog posts and on pages are resized to fit to the screen on mobile, or do I just have to live with the fact that if I add images to a blog post it’ll look dreadful on mobile?

I’m on Dawn 9.0

Thanks,

Rosalind

2

In the Dawn theme or any Shopify theme, you can ensure that images in blog posts and pages are resized to fit the screen on mobile by applying responsive styling. Here’s how you can achieve this:

  1. Locate the CSS file: In your Shopify theme editor, navigate to the “Assets” folder and find the CSS file that controls the styling of your blog posts and pages. The file may be named something like theme.css or styles.css.

  2. Add responsive CSS rules: Within the CSS file, you can add CSS rules that target images within the blog post or page content and adjust their sizing for mobile devices. Here’s an example of CSS code that you can use:

@media (max-width: 767px) {
  .article-content img {
    max-width: 100%;
    height: auto;
  }
}
3

Hi @OliviaMichaelCo ,

Could you share your page to check?8

4

Thanks for the reply. I added this to my base.css file but it didn’t appear to affect the image on mobile. This is the blog in question, if you view the page on a mobile, you’ll see the image is huge still: https://oliviamichaelcandle.co/blogs/vegan-candle-blog

Thanks.

5

I solved this by simply adding the following to the base.css file

img { max-width: 100%; height: auto; }