Edit the image cards

CBGreenhouses · August 10, 2021

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

CBGreenhouses · August 10, 2021

PS. Can I get "Free-Standing Greenhouse" to appear closer to the top of the image somehow?

tuanphan · August 11, 2021

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

CBGreenhouses · August 11, 2021

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.

tuanphan · August 15, 2021

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

CBGreenhouses · August 27, 2021

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.

tuanphan · August 29, 2021

Hi,

You mean

disable above code on Styles and Prices & Options pages?

CBGreenhouses · September 2, 2021

Yes! Thank you

tuanphan · September 4, 2021

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

CBGreenhouses · November 18, 2021

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

tuanphan · November 19, 2021

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?

CBGreenhouses · November 19, 2021

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

tuanphan · November 22, 2021

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

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

CBGreenhouses · November 23, 2021

You, sir, are a genius. There is literally nothing you cannot fix. Thanks yet again!😃

HG-Design · July 7, 2022

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

tuanphan · July 8, 2022

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

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

Do you still need help?

HG-Design · July 8, 2022

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.

tuanphan · July 9, 2022

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.

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

MissViking · November 21

I want to delete the image card title all together since the blog post already has a header. How do I do that?

tuanphan · November 21

2 hours ago, MissViking said:

I want to delete the image card title all together since the blog post already has a header. How do I do that?

You mean remove blog title on blog list page??

Edit the image cards

Recommended Posts

CBGreenhouses

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

CBGreenhouses

tuanphan

CBGreenhouses

tuanphan

CBGreenhouses

tuanphan

CBGreenhouses

tuanphan

CBGreenhouses

tuanphan

CBGreenhouses

tuanphan

CBGreenhouses

HG-Design

tuanphan

HG-Design

tuanphan

MissViking

tuanphan

Create an account or sign in to comment

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources