Jump to content

Edit the image cards

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://www.cedarbuiltgreenhouses.com/stylesprices

Hello I am trying to edit the font size of my image cards on this page. Can you tell me where I went wrong? Maybe "image.title is not correct for image cards?

(see the Free-Standing greenhouse image card at the top) 

 

/* Posters */
div#page-60788472f2262362250eed24 .image-title * {
    font-size: 30px;  font-weight: 500 !important;
}
div#page-60788472f2262362250eed24 .image-subtitle * {
    font-size: 16px !important;
}

 

Link to comment
  • Replies 17
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Hi,

Use this new CSS

/* StylesPrices Cart title subtitle */
div#page-60788472f2262362250eed24 {
  .image-title * {
      font-size: 30px !important;  
		font-weight: 500 !important;
  }
  .image-subtitle * {
      font-size: 16px !important;
  }
	figcaption.image-card-wrapper {
    align-items: flex-start !important;
}
.image-card.sqs-dynamic-text-container {
    padding-top: 0px !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 8/11/2021 at 11:35 PM, CBGreenhouses said:

Hi Tuan,

I just realized I unfortunately have this code I need running site-wide:

.design-layout-card .image-title * {font-size: 35px !important;}
 

Is there anyway to have your code override that for just this webpage?

Thanks.

Add this under above code


div#page-60788472f2262362250eed24 .design-layout-card .image-title * {font-size: 20px !important;}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

Hi again Tuan. A bit of a swap-around here.

I am now running this code site wide because it tidied things up: 

/* Site wide Image Cards*/
.design-layout-card {
  .image-title * {
      font-size: 28px !important; 
		font-weight: 500 !important;
  }
  .image-subtitle * {
      font-size: 18px !important;
  }
	figcaption.image-card-wrapper {
    align-items: flex-start !important;
}
.image-card.sqs-dynamic-text-container {
    padding-top: 0px !important;
}
}

However, I'd like these 2 pages to display the default image card spacing (not be pushed to the top). Is there some code I can use to override the site wide code for just these pages? Linked below:

#collection-5a39480f4192023c7edb6666 (Styles and Prices)

#collection-5a70b6b28165f5a8201192d5 (options)

Also, how do I find the  div#page? I can only find this #collection using the app.

 

 

Link to comment

Edit above code to this

/* Site wide Image Cards*/
body:not(#collection-5a39480f4192023c7edb6666):not(#collection-5a70b6b28165f5a8201192d5) .design-layout-card {
  .image-title * {
      font-size: 28px !important; 
		font-weight: 500 !important;
  }
  .image-subtitle * {
      font-size: 18px !important;
  }
	figcaption.image-card-wrapper {
    align-items: flex-start !important;
}
.image-card.sqs-dynamic-text-container {
    padding-top: 0px !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

Hi again Tuan,

Don't know what happened with this code but now the "Click here to learn more" buttons are tiny and off center: https://www.cedarbuiltgreenhouses.com/options

 

body:not(#collection-5a39480f4192023c7edb6666):not(#collection-5a70b6b28165f5a8201192d5) .design-layout-card {
  .image-title * {
      font-size: 28px !important; 
		font-weight: 500 !important;
  }
  .image-subtitle * {
      font-size: 18px !important;
  }
	figcaption.image-card-wrapper {
    align-items: flex-start !important;
}
.image-card.sqs-dynamic-text-container {
    padding-top: 0px !important;
}
}

 

Link to comment
14 hours ago, CBGreenhouses said:

Hi again Tuan,

Don't know what happened with this code but now the "Click here to learn more" buttons are tiny and off center: https://www.cedarbuiltgreenhouses.com/options

 

body:not(#collection-5a39480f4192023c7edb6666):not(#collection-5a70b6b28165f5a8201192d5) .design-layout-card {
  .image-title * {
      font-size: 28px !important; 
		font-weight: 500 !important;
  }
  .image-subtitle * {
      font-size: 18px !important;
  }
	figcaption.image-card-wrapper {
    align-items: flex-start !important;
}
.image-card.sqs-dynamic-text-container {
    padding-top: 0px !important;
}
}

 

You mean increase size & make it center?

image.thumb.png.27556f7df0e810706487bdda43b05aed.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Yes. They were normal before like all buttons on the site. It must be buttons inside image cards that they have updated and messed up the size.

Here is a photo of what I see while editing pages. This should be the normal size:

 

Also I will post my entire code here in case you see something affecting this.

/* Site wide Image Cards*/
body:not(#collection-5a39480f4192023c7edb6666):not(#collection-5a70b6b28165f5a8201192d5) .design-layout-card {
  .image-title * {
      font-size: 28px !important; 
		font-weight: 500 !important;
  }
  .image-subtitle * {
      font-size: 18px !important;
  }
	figcaption.image-card-wrapper {
    align-items: flex-start !important;
}
.image-card.sqs-dynamic-text-container {
    padding-top: 16px !important;
}
}

/* Gallery Lightbox caption black box overlay*/
.sqs-lightbox-meta {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}
.sqs-lightbox-meta * {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

/* Image caption black box overlay height */
figcaption.image-caption-wrapper p {
    margin-bottom: 0;
}
figcaption.image-caption-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* carousel arrows darker */
.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: rgba(0,0,0,0.55) !important;
}

/* Gallery size */
div#block-yui_3_17_2_1_1619114881682_7992 {
    width: 60%;
    margin: 0 auto;
}

/* Make caption always visible */
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.55) !important;
}

/* Normal Image Captions */
.sqs-block-image .image-caption p {  font-size: 16px !important;   font-family: "futura-pt";  text-transform: none !important;  letter-spacing: 1.0 pt !;  font-weight: 500 !important;  font-style: normal !important;  color: #ebebeb!;  line-height: 1.00em !important;}

/* Posters */
div#page-60788472f2262362250eed24 .image-title * {
    font-size: 30px;  font-weight: 500 !important;
}
div#page-60788472f2262362250eed24 .image-subtitle * {
    font-size: 16px !important;
}

 

Screenshot (23).png

Link to comment
  • Solution
On 11/20/2021 at 12:25 AM, CBGreenhouses said:

Yes. They were normal before like all buttons on the site. It must be buttons inside image cards that they have updated and messed up the size.

Here is a photo of what I see while editing pages. This should be the normal size:

 

Also I will post my entire code here in case you see something affecting this.

/* Site wide Image Cards*/
body:not(#collection-5a39480f4192023c7edb6666):not(#collection-5a70b6b28165f5a8201192d5) .design-layout-card {
  .image-title * {
      font-size: 28px !important; 
		font-weight: 500 !important;
  }
  .image-subtitle * {
      font-size: 18px !important;
  }
	figcaption.image-card-wrapper {
    align-items: flex-start !important;
}
.image-card.sqs-dynamic-text-container {
    padding-top: 16px !important;
}
}

/* Gallery Lightbox caption black box overlay*/
.sqs-lightbox-meta {
    padding-bottom: 5px !important;
    padding-top: 5px !important;
}
.sqs-lightbox-meta * {
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

/* Image caption black box overlay height */
figcaption.image-caption-wrapper p {
    margin-bottom: 0;
}
figcaption.image-caption-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

/* carousel arrows darker */
.sqs-gallery-controls .previous, .sqs-gallery-controls .next {
    background-color: rgba(0,0,0,0.55) !important;
}

/* Gallery size */
div#block-yui_3_17_2_1_1619114881682_7992 {
    width: 60%;
    margin: 0 auto;
}

/* Make caption always visible */
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    background-color: rgba(0,0,0,0.55) !important;
}

/* Normal Image Captions */
.sqs-block-image .image-caption p {  font-size: 16px !important;   font-family: "futura-pt";  text-transform: none !important;  letter-spacing: 1.0 pt !;  font-weight: 500 !important;  font-style: normal !important;  color: #ebebeb!;  line-height: 1.00em !important;}

/* Posters */
div#page-60788472f2262362250eed24 .image-title * {
    font-size: 30px;  font-weight: 500 !important;
}
div#page-60788472f2262362250eed24 .image-subtitle * {
    font-size: 16px !important;
}

 

Screenshot (23).png

Add to Design > Custom CSS

body.image-block-card-dynamic-font-sizing .sqs-block-image .image-block-outer-wrapper.design-layout-card a {
    font-size: 16px !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
12 hours ago, HG-Design said:

Hi @tuanphan, is it possible to add the title above the image card rather than below it please and alight to left side?

Webpage: https://wvcharge.squarespace.com/

Block id: #block-yui_3_17_2_1_1657192294280_6878

Photo for ref attached, 

 

Thank you in advance

Screenshot 2022-07-07 at 8.21.38 pm.png

I see you solved by creating a new image with text.

Do you still need help?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thank you @tuanphan, I managed to solve by making the "Powered by" part of the image but to be fair, that works quite well so happy to leave it. 

Is there a way however on mobile screens to make the logo appear under the text rather than above. Basically reverse the order for mobile screen only. 

Screenshots hopefully make more sense. 

IMG_7079.jpg

Link to comment
19 hours ago, HG-Design said:

Thank you @tuanphan, I managed to solve by making the "Powered by" part of the image but to be fair, that works quite well so happy to leave it. 

Is there a way however on mobile screens to make the logo appear under the text rather than above. Basically reverse the order for mobile screen only. 

Screenshots hopefully make more sense. 

IMG_7079.jpg

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1657265909921_7070+.row {
    display: flex;
    flex-direction: column-reverse;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.