Reducing image size on blog post (adding margins/padding?)

Site URL: https://www.nokoriware.com/blog/2022/6/4/may-2022

Hello!

I need help adjusting the size of images as they appear on my website's blog posts. The relevant URL is attached to this post as the "Site URL."

I've found code online that helps me adjust the padding on the bodies of text (since originally it was too narrow). But now I need help adjusting the images. When the website is fullscreen on a desktop web browser, they appear very large in comparison to the bodies of text, and it requires a lot of scrolling to get to the next body of text. Anytime I search this problem on Google, I end up only seeing a bunch of pages discussing the resizing of the images themselves for an image block.

Is there any way to add padding to these images to set a max width for them so that they don't appear so large on higher resolution monitors? For example, I'm using a 2K monitor, so the image sizes are quite large. I've attached a screenshot of how it looks on a maximized browser window for me.

Thank you for your time and I hope one of you can help!

I use spacer blocks to reduce image block size. They allow a lot of sizing flexibility. 

22 hours ago, derricksrandomviews said:

I use spacer blocks to reduce image block size. They allow a lot of sizing flexibility. 

I don't think this solution is suitable. This needs to affect all block pages, not just one. Unless there's a way to edit the template for all blog pages in one go?

There should be a way to do this with custom css I think. This may do it, 
Resize with CSS
 

Transform:scale is custom CSS code that you would enter under Design/Custom CSS. The (.5) within the transform:scale will reduce the image by 1/2 the size. You can decrease and increase this number until you get the image size that you want. 

.sqs-block-image
{
transform:scale(.5);
}

 To resize an image on mobile only use a mobile media query:
@media only screen and (max-width:640px) { .sqs-block-image {width:50%; margin:auto}}

If you want to resize only a particular block or section include the block or section id before sqs-block-image.
For example: #block-yui_3_17_2_1_1629676975747_7760.sqs-block-image