Jump to content

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

Recommended Posts

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!

 

Screenshot 2022-06-06 052704.jpg

Link to comment
  • Replies 3
  • Views 891
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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?

Link to comment

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

Edited by derricksrandomviews
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.