Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Toddigital

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

Question

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.

 

Screen Shot 2019-11-08 at 2.49.17 PM.png

Screen Shot 2019-11-08 at 2.49.56 PM.png

Share this post


Link to post

6 answers to this question

Recommended Posts

  • 1
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;
}
}

 

Share this post


Link to post
  • 0

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.
 

 

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0
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

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...