Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

Edited by LaurenZA
better title
Link to comment
  • Solution

Add to Page Settings > Advanced > Header

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 weeks later...
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?

Screenshot 2020-10-04 at 5.34.42 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 1 year later...

@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;
}
}

 

Screenshot 2021-11-30 at 16.33.28.png

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

 

Screenshot 2021-11-30 at 16.33.28.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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 

 

Edited by NickIppolito

SquareKickerHi, I'm Nick, CEO & Co-Founder at squarekicker.com.  Take your Squarespace sites to the next level with SquareKicker's No-Code Design & Animation Extension. Break free from templates & complex code and start building unique websites that you are proud to show your clients without ever having to write a single line of code. 

Tutorials  ●  News  ●  Inspiration  ●  Features  ●  FAQS

 

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

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

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.