Code Amp

Do you have a link I could look at?

Hey @oaz

Sorry for the delay.

In regards to the Google fonts, do you already have them added to you site?

If so, we could probably achieve this with some custom CSS.

Regarding the minimum height, as I can’t see the issue (I assume your removed our plugin from your link) I would suggest using custom CSS on the card to set it, something like:

.cl-template {
    min-height: 500px;
}

To change the space taken up by the image, I would suggest using an aspect ratio to control the space that is taken:
https://snipboard.io/Tlptxd.jpg

Let me know how you get on.

Thanks

Hi @xmarksthespot

We’re looking to add a fix for this, but for now you could add this custom CSS to remove the gaps at the side:

.cl-layout {
	margin-left: -50px;
	margin-right: -50px;
	overflow: hidden;
}

Let me know if that works for you?

Thanks

Hey Jens

Currently the image would need to be set as the featured image.

However I did find some code which automatically sets the featured image based on images in the post content:
https://www.gavick.com/blog/wordpress-automatically-set-post-featured-image

It does sound like a good idea to add an option for the featured image to fallback to a post content images (I’ll put this on the feature requests).

I hope that helps!

Great stuff, glad that worked out for you!

Hey @savantking99

Can you show me a screenshot of what this looks like?

I imagine it would just be a disabled box, but we don’t have any functionality to disable this feature at all (so I can’t imagine how that happened).

Can you also check the JS console for any errors and let me know what you see?

Here are instuctions for opening the console in Chrome:
– https://ww.wp.xz.cn/support/article/using-your-browser-to-diagnose-javascript-errors/#chrome

Thanks

• This reply was modified 3 years, 11 months ago by Code Amp.

Hey @emgb_520

Just to let you know we can’t always provide support for custom CSS (we do it usually when we have a bit of spare time, but these days is lacking!)

To get the top row of items closer together you could try swapping this code:

.cl-element.cl-element-section.cl-element--instance-1007 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

For:

.cl-element.cl-element-section.cl-element--instance-1007 {
    display: grid;
}

However, we’re kindof stuck with CSS grid for some of these items (which is why the spacing can be off) and I see in your other ticket you want some of the items to be closer together.

The previous code supplied by a colleague of mine, and uses CSS grid (something I don’t have a lot of experience with).

I would take a different approach instead using flexbox, so the overall CSS code should look like (remove the code we supplied before):

.cl-element.cl-element-section.cl-element--instance-1007 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    height: fit-content;
}

.cl-element.cl-element-taxonomy.cl-element--instance-1001 {
    width: 15%;
}

.cl-element.cl-element-custom_field.cl-element--instance-1002 {
     width: 15%;
}

.cl-element.cl-element-modified_date.cl-element--instance-1003 {
   width: 15%;
}

h3.cl-element.cl-element-title.cl-element--instance-1004 {
   width: 100%;
}

.cl-element.cl-element-custom_field.cl-element--instance-1005 {
   width: 100%;
}

@media only screen and (max-width: 959px){
  .cl-element.cl-element-section.cl-element--instance-1007 {
    display: block;
   } 
}

Those lines with the width: 15%; represent the first 3 items that you wanted stacked together in one row.. these 3:

.cl-element.cl-element-taxonomy.cl-element--instance-1001 {
    width: 15%;
}

.cl-element.cl-element-custom_field.cl-element--instance-1002 {
     width: 15%;
}

.cl-element.cl-element-modified_date.cl-element--instance-1003 {
   width: 15%;
}

You could actually remove the width, and just add a margin to control their spacing:

.cl-element.cl-element-taxonomy.cl-element--instance-1001 {
    margin-right: 20px;
}

.cl-element.cl-element-custom_field.cl-element--instance-1002 {
    margin-right: 20px;
}

.cl-element.cl-element-modified_date.cl-element--instance-1003 {
   margin-right: 20px;
}

I hope that helps!