Adjusting the image size in an "Image Block: Card" (FlatIron)

I'm wanting to have the images in an "Image block" a specific or adjustable size when in mobile view. 

Thank you in advance. 

Attached standard vs mobile view.

I'm no expert but firstly I'd identify the #block-yui ID number for that image and simply set a media query. 

Install squarespace block identifier onto your computer. 

Then enter your custom code.

Something like:

This is my code to set a custom width on a computer screen

#block-yui_3_17_2_1_1573147737484_74837
{ 
 width: 150px
}

This is my code to set a custom size for the image on a mobile screen

@media only screen and (max-width: 600px) {#block-yui_3_17_2_1_1573147737484_74837{  width: 50px}}

Hope this helps. 

I've only been coding for a few months but seems to work for me.
 

I think we are getting somewhere on it now. Although it makes the entire block, including the text the width. Thank you for pointing me in the right direction. I'll see if I can tweak this further to only affect the image.

42 minutes ago, Toddigital said:

I think we are getting somewhere on it now. Although it makes the entire block, including the text the width. Thank you for pointing me in the right direction. I'll see if I can tweak this further to only affect the image.

You can use CSS query max-width for only image

If you share link to your site, i can take a look.

https://www.toddigital.com/roundhaus

I only really need the size to be specified on mobile view. Desktop works fine. Hope that makes sense. Thank you Tuanphan!

42 minutes ago, Toddigital said:

https://www.toddigital.com/roundhaus

I only really need the size to be specified on mobile view. Desktop works fine. Hope that makes sense. Thank you Tuanphan!

add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
/* Vs image */
div#block-yui_3_17_2_1_1572590735418_579302 .image-inset {
    max-width: 50%;
    height: auto;
    margin: 0 auto;
}
/* last 3 image blocks */
div#block-yui_3_17_2_1_1572590735418_579302 ~ .sqs-block-image .image-inset {
    max-width: 50%;
    height: auto;
    margin: 0 auto;
}
}

Worked perfect!

Thank you so much tuanphan! 

On 11/25/2019 at 10:45 AM, tuanphan said:

You can use CSS query max-width for only image

If you share link to your site, i can take a look.

Hi, @tuanphan I need help with my card image block 's image size. I want it to be aligned with the text.

here's the url:

https://www.gi-cognition.com/services

I want the image and text to be aligned properly.

Thanks in advance for your reply:)

21 hours ago, Asiya said:

Hi, @tuanphan I need help with my card image block 's image size. I want it to be aligned with the text.

here's the url:

https://www.gi-cognition.com/services

I want the image and text to be aligned properly.

Thanks in advance for your reply:)

Try adding this to Design > Custom CSS. This code for first image block. If it works, I will send code for other items.

div#block-d38d5973c7b4567afecd figure {
    align-items: center;
}

34 minutes ago, tuanphan said:

Try adding this to Design > Custom CSS. This code for first image block. If it works, I will send code for other items.

div#block-d38d5973c7b4567afecd figure {
    align-items: center;
}

 

Hi, i have added this but the image gets at the center and there is some white space above and below it.

On 12/30/2020 at 8:48 PM, Asiya said:

Hi, i have added this but the image gets at the center and there is some white space above and below it.

Use new code

div#block-d38d5973c7b4567afecd figure {
    align-items: center;
    background: #ebf2f5;
}

Hi Tuanphan!
I have exactly the same issue with the way my Image Card Block views on mobile. 
I would like the image/text layout to stay the same on mobile not stack as it defaults to at the moment.
Should I email you directly to get some help?
Let me know,
Ash

On 4/4/2023 at 8:43 AM, Ashling said:

Hi Tuanphan!
I have exactly the same issue with the way my Image Card Block views on mobile. 
I would like the image/text layout to stay the same on mobile not stack as it defaults to at the moment.
Should I email you directly to get some help?
Let me know,
Ash

Just share link to page where you use Image Card, we can check easier, no need to send email