How to change image % in image card block (7.1)

Site URL: https://flashactsfestival.org/

Hi Everyone!

I'm working on this specific page: 
https://flashactsfestival.org/gorn-galaxy
PW: FAF2020

I want to adjust the percentage of horizontal space the image takes up compared to the text. Ideally, instead of 50%, I would like the image to take up 30%.

I feel like this used to be a feature in 7.0? But now I cannot find it in either 7.0 or 7.1.

Hoping someone can help me with the CSS for this. 

Thank you!

Lauren

Thank you!

On 9/12/2020 at 11:02 AM, tuanphan said:

Add to Page Settings > Advanced > Header

<style>
  @media screen and (min-width:768px) {
  .design-layout-card .intrinsic {
    width: 30% !important;
}
  }
</style>

 

@tuanphan, I used this code in the Custom CSS section with the specific block image ID— is there a line I can add to make the image centered in its "column"? Right now the image is at 30% width, but it's aligning to the right, like in the screenshot.

I would like to make it so that the image is smaller and that both text and image are centered within the image card block, would you be able to help?

10 hours ago, lizmak said:

@tuanphan, I used this code in the Custom CSS section with the specific block image ID— is there a line I can add to make the image centered in its "column"? Right now the image is at 30% width, but it's aligning to the right, like in the screenshot.

I would like to make it so that the image is smaller and that both text and image are centered within the image card block, would you be able to help?

try

margin: 0 auto !important;

Thank you @tuanphan! It works perfectly. Do you know the attribute for the text portion of the card block? I would like to change its width as well.

On 10/5/2020 at 9:10 PM, lizmak said:

Thank you @tuanphan! It works perfectly. Do you know the attribute for the text portion of the card block? I would like to change its width as well.

Can you share site url? We can check easier.

On 10/6/2020 at 7:07 PM, tuanphan said:

Can you share site url? We can check easier.

it's https://lizmak.io/intl-sos-assistance-app/ and the password is mizupizu. I'd like to make it so that the name of the organization (Intl SOS) appears on one line.

19 hours ago, lizmak said:

it's https://lizmak.io/intl-sos-assistance-app/ and the password is mizupizu. I'd like to make it so that the name of the organization (Intl SOS) appears on one line.

Add to Page Settings > Advanced > Header

<style>
  @media screen and (min-width:768px) {
  .design-layout-card figcaption.image-card-wrapper {
    width: 70% !important;
}
  }
</style>

Thank you, @tuanphan!!

@tuanphan I have implemented this code but now my text width seems to be very small, I would like it to extend a bit further on the page. Screenshot attached for reference

//LOCATION SOLUTION CARDS//
[data-section-id="61a39fe6dfd0aa67845aaf2d"]{
@media screen and (min-width:768px){
  .design-layout-card .intrinsic {
    width: 10% !important;
}
}
}

@media screen and (min-width:768px){
.image-card.sqs-dynamic-text-container {
 width: 90% !important;
      position: relative !important;
    left: -50% !important;
}
}

20 hours ago, Leanie said:

@tuanphan I have implemented this code but now my text width seems to be very small, I would like it to extend a bit further on the page. Screenshot attached for reference

//LOCATION SOLUTION CARDS//
[data-section-id="61a39fe6dfd0aa67845aaf2d"]{
@media screen and (min-width:768px){
  .design-layout-card .intrinsic {
    width: 10% !important;
}
}
}

@media screen and (min-width:768px){
.image-card.sqs-dynamic-text-container {
 width: 90% !important;
      position: relative !important;
    left: -50% !important;
}
}

 

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

@tuanphan see below

https://dory-antelope-3w8g.squarespace.com/new-page-1

On 12/1/2021 at 9:49 PM, Leanie said:

@tuanphan see below

https://dory-antelope-3w8g.squarespace.com/new-page-1

Hi. Your site is private. Can you setup password & share url again?

@tuanphan

https://dory-antelope-3w8g.squarespace.com/new-page-1

Password: W172021

@LaurenZA, @lizmak

SquareKicker opens up the option to do with natively in Squarespace 7.1 without ever touching a single line of code.  See video demo below:

Note: If you only want SK for this single feature, you can sign up for a single month and cancel and all customisations save forever.  You can even save this as a preset on a Pro plan to reuse on Image Card blocks across your site.     

https://squarekicker.com/features#image 

On 12/5/2021 at 10:10 PM, Leanie said:

@tuanphan

https://dory-antelope-3w8g.squarespace.com/new-page-1

Password: W172021

Don't remove any code in your current code. Add this to Design > Custom CSS

@media screen and (min-width:992px) {
div#page-section-61a39fe6dfd0aa67845aaf2d figcaption {
    width: 85%;
    margin-left: 0 !important;
}
div#page-section-61a39fe6dfd0aa67845aaf2d figcaption>div {
    left: unset !important;
    width: 100% !important;
}
}