Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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 8
  • 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.

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 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.

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...

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
  • Solution

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.

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...