[TechNews] Font size for first card title is not consistent for 2 columns layout
-
May 10, 2022 at 7:34 pm #7443
[anonymous]
The h1 class=c-card__title for the first card displayed on the homepage is causing inconsistent font size whenever 2 column layouts are selected. It is much larger than the other cards.
On the other hand, there is no such problem for the tag, tags, and authors pages as the first card’s c-card__title is declared as h2 class=h5 c-card__title
May 11, 2022 at 6:20 am #7447Bob
I will fix it in an upcoming Publii release, meanwhile, you can fix it by editing the index.hbs file (Documents ▸ Publii ▸ sites ▸ YOUR_SITE ▸ input ▸ themes ▸ YOUR_THEME) as follows:
about 73 lines, find the following code snippet:
<h1 class="c-card__title"> <a href="{{url}}"> {{title}} </a> </h1>and replace it with:
<h1 class="c-card__title {{#checkIf @config.custom.layoutFrontpage '==' "2col" }}h5{{/checkIf}}"> <a href="{{url}}"> {{title}} </a> </h1>You don’t need to overwrite the index.hbs file as this is exactly what I will apply in the next theme release.
May 11, 2022 at 7:05 am #7449[anonymous]
Thanks for your help, Bob.
However, the fix only worked for Frontpage Layout: 2 columns.
The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.
May 11, 2022 at 10:02 am #7450[anonymous]
[anonymous] wrote:Thanks for your help, Bob.
However, the fix only worked for Frontpage Layout: 2 columns.
The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.
On Apple Safari browser, if after making the change Bob suggest above, in the Theme > Theme Settings > Custom Settings > Layout > Layout, change from 1 column to 2 columns, that seems to fix your issue on the latest version demo.
You still have the H1 on the home page for the first card, but the heading font size now matches the other cards.
May be a browser cache element involved too, so you might need to clear your browser cache to detect the change.
<hr />
Scrub that: you’re right. Sorry 🙂
May 11, 2022 at 10:17 am #7451[anonymous]
[anonymous] wrote:[anonymous] wrote:Thanks for your help, Bob.
However, the fix only worked for Frontpage Layout: 2 columns.
The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.
On Apple Safari browser, if after making the change Bob suggest above, in the Theme > Theme Settings > Custom Settings > Layout > Layout, change from 1 column to 2 columns, that seems to fix your issue on the latest version demo.
You still have the H1 on the home page for the first card, but the heading font size now matches the other cards.
May be a browser cache element involved too, so you might need to clear your browser cache to detect the change.
<hr />
Scrub that: you’re right. Sorry 🙂
After regenerating a few times with Frontpage Layout set to “2 columns -2-1” or “2 columns -4-1”, on my device, the problem did indeed clear. So looks like a caching issue.
May 11, 2022 at 12:37 pm #7452[anonymous]
[anonymous] wrote:[anonymous] wrote:[anonymous] wrote:Thanks for your help, Bob.
However, the fix only worked for Frontpage Layout: 2 columns.
The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.
On Apple Safari browser, if after making the change Bob suggest above, in the Theme > Theme Settings > Custom Settings > Layout > Layout, change from 1 column to 2 columns, that seems to fix your issue on the latest version demo.
You still have the H1 on the home page for the first card, but the heading font size now matches the other cards.
May be a browser cache element involved too, so you might need to clear your browser cache to detect the change.
<hr />
Scrub that: you’re right. Sorry 🙂
After regenerating a few times with Frontpage Layout set to “2 columns -2-1” or “2 columns -4-1”, on my device, the problem did indeed clear. So looks like a caching issue.
Another update. I’ve checked again, and it looks like the problem is still present: sorry. (it’s weird :-). Might need further updates to index.hbs to check for “2col-1-4” and “2col-4-1” in addition to “2col”. Perhaps @Bob can help further.
May 12, 2022 at 8:37 pm #7462[anonymous]
[anonymous] wrote:Thanks for your help, Bob.
However, the fix only worked for Frontpage Layout: 2 columns.
The first card card title still shows h1 fontsize when Frontpage Layout is “2 columns -2-1” or “2 columns -4-1”.
Try using the following:
<h1 class="c-card__title {{#checkIf @config.custom.layoutFrontpage '==' "2col" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-1-4" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-4-1" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-2-1" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-1-2" }}h5{{/checkIf}}"> {{title}} </h1>May 13, 2022 at 9:30 am #7464[anonymous]
Thanks @itips3727. Your code helped.
I was caught over complicating things trying to figure out how to use OR logic expressions to test for the various frontpage layouts, @config.custom.layoutFrontpage.
And it didn’t occur to me to do brute-force testing one-by-one worked.
Testing were only necessary in layouts when the first card is a “small” card. Hence, I took out the checkif’s for 2col-1-2 and 2col-1-4<h1 class="c-card__title {{#checkIf @config.custom.layoutFrontpage '==' "2col" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-2-1" }}h5{{/checkIf}} {{#checkIf @config.custom.layoutFrontpage '==' "2col-4-1" }}h5{{/checkIf}}"> </h1>