Jump to content

Change Image width of one image card only

Recommended Posts

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!

Screen Shot 2020-11-17 at 7.57.50 PM.png

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

Screen Shot 2020-11-17 at 7.57.50 PM.png

Please share your site url so we can help

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 hour ago, mallorycs said:

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

image.png.1df7997d6c76dd8436ba31749fe36905.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

image.thumb.png.2f7f0d55dcbbc7914dade0c4a021e705.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.