Changing image width for image block: card on one page

I'm wanting to change the image width of these "card" image blocks on just one page while leaving the other settings and other pages intact, as I use the block on other pages and like the setting there. The image is too large on our staff page, though. I can't seem to find the correct class to adjust the image width without affecting the "stack" image blocks on the same page.

Default setting in Design > Styles, which I want on all other pages

What I want on this page only:

Can you share link to page in screenshot? We can check easier.

Add the following to Design > Custom CSS.

#collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width) {

  -ms-justify-content: unset;
  justify-content: unset;
  
  }

#collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {

  min-width: 150px;
  width: 20%;
  
  }

#collection-5f11cfd34cf3723b9f368981 .sqs-block-image .design-layout-card:not(.sqs-narrow-width).image-position-left .image-card-wrapper {

  margin-left: 5%;
  
  }

Let us know how it goes.

Works brilliantly, creedon, thank you!

@creedon - I tried your code but couldn't get it to work... can you help? 

@SproutDesignStudio

Please post the URL for the page on your site where you want to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

Hi @creedon 

Thank you for your reply. 

The site is: valleyfoodpartnership.squarespace.com
Password is: kim

I would like to change sizing ratio of the image cards on the Staff/Board page only. Maybe I got the Collection ID wrong? 

Thanks.

10 hours ago, SproutDesignStudio said:

Password is: kim

That password does not work.

@creedon - sorry, password is: valleyfood

@SproutDesignStudio

Yes change the collection id to...

collection-5ff75ce123b8f237e195b9d3

You may want to give this alternate code a try. It was developed later than the code above.

Add the following to Design > Custom CSS.

/*

  begin change image card, image to text width ratios
  
  Version       : 0.2d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @image-width : 35%; /* how much the image takes up of the total width (100%)
                         available */
  
  /*
  
    the following targets all image cards, if you want to target specific ones
    then put // ( forward slash twice and space ) before the next line. that
    disables the site-wide effect. then use the multi-selector section to target
    specific image cards
    
    */
    
  #imageTextRatio();
  
  /*
  
    multi-selector section
    
    here is where you can build up selectors to target specific image cards.
    when targeting multiple items each line should end with a comma except for
    the last line. following are some examples
    
    targeting a single item
    
      a page
      
        #collection-5ff75ce123b8f237e195b9d3
        
      a page section
      
        #page-section-6019f74588988b10419eb99c
        
      an image block
      
        #block-yui_3_17_2_1_1621396382553_4638
        
    targeting multiple items
    
      image blocks
      
        block-yui_3_17_2_1_1621396382553_4638,
        block-yui_3_17_2_1_1621970255707_4758
        
    */
    
  /* remove this line to use multi-selectors
  
  [enter CSS selector(s) here to target your image card(s)]
  
    {
    
      #imageTextRatio();
      
      }
      
    remove this line to use multi-selectors */
    
  // do not change anything below, there be the borg here
  
  #imageTextRatio() {
  
    .sqs-block-image {
    
      .design-layout-card:not( .sqs-narrow-width ) {
      
        align-items : center;
        
        > div:first-child {
        
          width : @image-width - 2.5%;
          
          }
          
        .image-card-wrapper {
        
          width : 100% - @image-width - 2.5%;
          
          }
        }
      }
    }
    
  // end change image card, image to text width ratios

Let us know how it goes.

That did it! Thank you so much, @creedon!

@creedon I have try some of this code to center the image but no luck.
i mange to change de size of it for mobil with this code

#block-yui_3_17_2_1_1615808058082_3767 {width: 40% !important;
}

but cant find the right code to align centre 

iliafrancis.com/linkinbio

thank you

@jennypetit

When I comment out that code the picture centers on its own.

no sure what you mean. I still see it aligned to left on mobile.  that code only changed the width. 

@jennypetit

Ah. I think I see where you are going. Try the following to replace the code I previously suggested commenting out.

#block-yui_3_17_2_1_1615808058082_3767 {

  margin-left : auto;
  margin-right : auto;
  width : 40%;
  
  }

Let us know how it goes.

aww got ya that worked thanks so much.