Is it possible to edit image size within markdown block?

Is there a way to edit the size of an image that is embedded within a markdown block?

Currently I'm trying to created a bulleted "to-do" checklist of many items to show which items have been completed and which are still outstanding.

That said, I've successfully added the images to the markdown block by using the reference style code found on the current cheat sheet: https://support.squarespace.com/hc/en-us/articles/206543587-Markdown-cheat-sheet

Reference-style:

![alt text][id]
[id]: /url/to/img.jpg "Title"

However, the images are now significantly way too big for the text. Is there a way to scale down the image size within the markdown block code?

Thanks in advance.

Hi,

I added the code below into the markdown box with my image and it resized for me!

<img src="/s/blank.jpg"; img style="height: 20px; width: 20px;">

Change the blank.jpg to your "filename.filetype".

Hope that helps!

You can add Code Block under Markdown Block & use this code to resize image

<style>
  .markdown-block img {
  	width: 20px;
    height: auto;
  }
</style>

@tuanphan Is there a way to use this if there is more than one image within a single markdown block? My site url is https://www.sundaymusecreative.com/workinggg and I'm trying to make the two images in the "brand identity" markdown block different sizes

Thank you!!

10 hours ago, Leah007 said:

@tuanphan Is there a way to use this if there is more than one image within a single markdown block? My site url is https://www.sundaymusecreative.com/workinggg and I'm trying to make the two images in the "brand identity" markdown block different sizes

Thank you!!

Can you take screenshot all syntax in the Markdown?

Hello @tuanphan – long time fan, first time commenter!

I've been playing around with this for hours and have finally managed to get my images in line with the text as well as scale them to the size I want. Unfortunately the images align with the baseline of the text and I'd like them to align to the centre (see image attached for my figma design that I'm trying to replicate). 

URL: https://plane-opossum-nlpb.squarespace.com/

Password: lotsofsnacks

Can you help?

You can add this code to Website Tools (under Not Linked) > Custom CSS

div.markdown-block h2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

How about on mobile?

Thanks! I will replace the images so they have more space around each logo.

Correct - on mobile this all looks a bit crazy! (see attached).

I'd like to fix the formatting, as well as bringing the font size down and scale the logos to suit.

The url doesn't work now. Can you check it again?

URL: https://plane-opossum-nlpb.squarespace.com/

Password: lotsofsnacks

Hey @tuanphan

Had to change it for my client – it is now warpsnacks.squarespace.com

Password: lotsofsnacks

To make text size down, use a style syntax like this (just an example)

<h2 style="font-size:10px;">text text text</h2>

With mobile, add this code to Website Tools (under Not Linked) > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1702295595800_79033 h2 {
    flex-direction: column;
}
}