Change Image width of one image card only

Hi, I'd like to change the image width of the image in only *one* image card on my website (and keep the rest what I have set up in site styles). Anyone have the code for this? 

I used this per someone's suggestion to change the image width: 

#block-yui_3_17_2_1_1605548051376_192795 {
  .design-layout-card .intrinsic {
    width: 80% !important;
}
  }

However, then the text does not adjust to fill the white space between the photo and the text. As you can see in the photo. 

Thank you!

50 minutes ago, mallorycs said:

Hi, I'd like to change the image width of the image in only *one* image card on my website (and keep the rest what I have set up in site styles). Anyone have the code for this? 

I used this per someone's suggestion to change the image width: 

#block-yui_3_17_2_1_1605548051376_192795 {
  .design-layout-card .intrinsic {
    width: 80% !important;
}
  }

However, then the text does not adjust to fill the white space between the photo and the text. As you can see in the photo. 

Thank you!

Please share your site url so we can help

https://dandelion-stretch.squarespace.com/config/pages

1 hour ago, mallorycs said:

https://dandelion-stretch.squarespace.com/config/pages

 

 

Where is this section on home page or any page? I dont see it

Oh it was a disabled page. I just enabled it. Can you see now?

https://dandelion-stretch.squarespace.com/config/pages

2 hours ago, mallorycs said:

Oh it was a disabled page. I just enabled it. Can you see now?

https://dandelion-stretch.squarespace.com/config/pages

What is that page url, /config is the link to your admin end and I can't access that

1 hour ago, bangank36 said:

What is that page url, /config is the link to your admin end and I can't access that

https://www.sundayschoolwine.com/membership

@bangank36 And actually, now that I'm looking at the url I gave you (not in the admin), the code I quoted originally doesn't seem to be working. Basically I just want each image card to have the image set at different widths. And the text to fill the remaining space.

Remove (make a copy) or comment out any previous CSS attempts to achieve this effect.

Add the following to Design > Custom CSS.

/* begin don't dump wine down the drain */

  #block-yui_3_17_2_1_1605548051376_192795.sqs-block-image .design-layout-card:not( .sqs-narrow-width ) {
  
    /* how much the image takes up of the total width (100%) available */
    
    --image-width: 50%;
    
    }
    
  #block-yui_3_17_2_1_1605548051376_192795.sqs-block-image .design-layout-card:not( .sqs-narrow-width ) > :first-child {
  
    width: calc( var( --image-width ) - 3.5% );
    
    }
    
  #block-yui_3_17_2_1_1605548051376_192795.sqs-block-image .design-layout-card:not( .sqs-narrow-width ) .image-card-wrapper {
  
    width: calc( 100% - var( --image-width ) - 3.5% );
    
    }
    
  /* end don't dump wine down the drain */

This is for a v7.0 site using the Brine template.

You can of course change the --image-width: 50%; line to control how much space the image takes up.

You can replicate this entire set of rules, changing the block id (#block-yui_3_17_2_1_1605548051376_192795) to change whichever image card you wish to change.

Let us know how it goes.

3 hours ago, mallorycs said:

@bangank36 And actually, now that I'm looking at the url I gave you (not in the admin), the code I quoted originally doesn't seem to be working. Basically I just want each image card to have the image set at different widths. And the text to fill the remaining space.

Is this what you need

#block-yui_3_17_2_1_1605548051376_192795 .design-layout-card .intrinsic {
    width: 50% !important; 
}
#block-yui_3_17_2_1_1605548051376_192795 .design-layout-card .image-card-wrapper {
    width: 50% !important; 
}