Cornerstone Card element displays wonky if longer front title

[llart3]

Hello,

I am building a gallery with the Card element in Cornerstone, but am having trouble with card display when the front title gets longer. You can view the problem at http://www.lauraletchingerart.com/prints, the fourth card (“Wavelength”). I put in some html , and this did shrink the title size and fix the display problem. But it changes the text size for any additional cards downstream from it – You have to look at the page on the front end to see the problem. I also can’t get the front content (vs title) size to match with the previous cards. Would you have a code for a simpler fix? This will be a gallery that will grow over time and with more card elements so I’ll need to use it in the future as additions are made that have longer titles.

Many thanks,
Laura

[christian]

Hey Laura,

Please remove your HTML code so we could see the issue and so we could give you proper advice. Also, the font tag is deprecated so it is not advisable to use it.

Thanks.

[llart3]

Ok – HTML is removed and you can now see the problem – 1st row last card (WAVELENGTH)
Hopefully there’s a code that will work to fix this and any other cards I create with long titles?

Thanks very much,
Laura

[christian]

Hey Laura,

There are two solutions for this.

One is to change the card’s title to a fixed size. This will make the title size uniform. The CSS would be

.x-face-title {
    font-size: 12px !important
}

Adjust the size as needed.

Two would be to use Responsive Text feature for the card title. This is if you want your title to autmatically resize. The title’s selector is x-face-title. Please see https://theme.co/apex/forum/t/shortcodes-responsive-text/174 for usage instruction and http://demo.theme.co/integrity-1/shortcodes/responsive-text/ for demo. In Cornerstone, you can find the Responsive Text setup option under the Settings tab. See https://theme.co/apex/forum/t/cornerstone-interface-settings/125

Thanks.

[llart3]

Hi Christian,

Thanks for your reply–
I put x-face-title into the the Cornerstone responsive text setting, and put a small size of 12px into the max box, but nothing changed. . . I’m not sure what I’m doing wrong?

UPDATE: I changed the number of columns down to 3 instead of 4, and I’m having a better result. . . will let you know if I need further assistance. . .

Thank you,
Laura

[llart3]

Hi again,

So I’m stuck again, trying to get font sizes correct for the front of the card element on this page:

PRINTS - Laura Letchinger Art

If you look at the card titled RINGER in both the first and second rows, in the first row the title size is correct but the content size is too small/incorrect (in the RINGER card in the second row, the title size is too small/incorrect and the content size is correct). Ever since the WAVELENGTH card issue (see earlier in post), the font will not automatically display properly, including new cards I create.
Can you please help? I don’t know what else to try.

Thank you,
Laura

[nabeel]

Hi again,

It looks like you’ve an unclosed HTML tag in your content, most probably you’ve used the tag in the title of your card (check it in the Ringer card in your second row), please find and remove it. This should fix the issue.

Let us know how this goes!

[llart3]

Hi,

I couldn’t find any HTML . . . so I just deleted everything and started over. The font size for the front content (card element) still looks a little small, but I’m just going to live with it and move on.

Thank you,
Laura

[jade]

You’re welcome, Laura.

Cheers!