Edit the image cards

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

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

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

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.

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

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.

Hi,

You mean

disable above code on Styles and Prices & Options pages?

Yes! Thank you

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

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

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?

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

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

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

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?

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. 

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