Blog images not cooperating

Shopify Discussion
1

I’m trying to constrain my blog images to no more than 500px in height and width. I’ve tried putting the following code in the theme’s custom css box, I’ve tried it in assets/blog.css and in theme.liquid

What am I doing wrong? The site URL is https://2aready.com

/* Constrain blog images to a maximum height and width */
.article img {
max-width: 500px;
max-height: 500px;
width: auto;
height: auto;
object-fit: cover;
}

2

@In2Deep , In your theme.liquid you should wrap your css code with

But what’s exactly image do you want to constrain ?

3

Hi @In2Deep
Please put this css in theme.liquid before body closing tag

Please press Like and Mark Solution if you find it helpful.
Thanks!

4

That didn’t change anything for me. I would like to constrain any and all images posted as a blog image to remain a constrained size becuase a 1200x1200px image doesn’t look good. The blogs are located at: https://2aready.com/blogs/news

5

That worked for constraining the images! Thank you, now I need to figure out the padding.

6

Which padding @In2Deep ?
Can you please explain
If you want to put it in left remove “margin: 0 auto;”, I added that to center the image

7

Here are two examples now that the images are constrained there is a considerable gap on some images that are 500 pixels in width but don’t have the height. Is there a way to auto adjust so that a shorter image height doesn’t block off so much wasted space?

example01.png
example01.png964×903 31.2 KB

example02.png
example02.png964×903 40.4 KB

8

Please try this

Thanks!

9

@In2Deep

Remove previous code &

Please try this

10

Perfect, thank you.