Customize "Image card block" in a blog post

Hi everyone, 

I tried looking on the forum if anyone had the same question, but I only found half of the solution (which is already great ^^)

Site url : https://sailfish-porpoise-m85e.squarespace.com/blog/blog-post-title-two-erhxs-rgb35-6pzex

I'm working on a blog post, and I would like to custom the "Image card block" so that the image is smaller and aligned to the left, and I would like the text to be aligned on the left too, and I also would like it to fill the red block here :

I already found this code to custom the image size :

#block-yui_3_17_2_1_1692881181534_18562.sqs-block-image .image-inset {
    max-width: 40%;
    height: auto;
    margin: 1 auto;
}

As you can see,  I played a bit with it and managed to move the image to the left.

Is it possible to move the text and make it fill the block ?

Thanks !

Can you add a site wide password for your website and share it here so someone can look at what you've done and suggest some code?

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

Ok password is "hello".

Let me know if it's working !

Works perfectly, thank you so much !

46 minutes ago, Margaux said:

Works perfectly, thank you so much !

Brilliant!

Hi, I hope it's OK to hop on here - I have a similar issue - wanting to resize the image in the card on blog posts, so as to create an author bio.

https://sprout-flamingo-9m98.squarespace.com/recipes/dehydrated-raw-vegan-corn-chips?p

Password: SQUARESPACE

@Jen__ You can control this globally in the style settings which may work best for you if this is the only place you are using the Card Image Block. Given that these blocks now only apply to blogs since the Fluid Engine Editor is on every other page this is probably the case. If not then you should be able to use the previous code and apply it to your website using you block IDs, or by just removing the block ID portion of the code like this:

.sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {
    width: 30% !important;
  }
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
    width: 65% !important;
  }

Thanks for your speedy solution!
I was able to correct the issue using site styles.
Extremely grateful to you Ziggy 🙏🙏

9 minutes ago, Jen__ said:

Thanks for your speedy solution!
I was able to correct the issue using site styles.
Extremely grateful to you Ziggy 🙏🙏

Glad to hear that, happy to help!