Jump to content

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

Recommended Posts

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.
 

 

Link to comment
  • 3 weeks later...
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.

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.