[Resolved] Responsive typography for a Hook?

[Steven]

I created an Element (after_header) to add a custom tagline below the masthead and above the page content for every page on my site.
In this Element I created a container with no constraints and inside that a Paragraph block.
The font size of this Paragraph block is cool on desktop but larger than I would prefer on mobile and tablet.
I see the responsive controls when I target the Paragraph element, but changes seem to apply to every view. For example, if I set type size to M (or some custom size) in Desktop view, it’s M in Mobile view. If I set it to S (or any custom size) it’s that way on desktop.
What am I overlooking?
Thank you,
Steve

[Ying]

Hi Steven,

I see the responsive controls when I target the Paragraph element, but changes seem to apply to every view.

I’m not sure what block you are using, but the WP paragraph block and heading block do NOT have responsive control.

Do you have the GenerateBlocks plugin installed? If so, you can use a headline block, it can control typography responsively.

[Steven]

Oh, hmm.
Yes, I do have GenerateBlocks installed.
But I also have H1-H3 elements defined with styles in the Customizer. Would these settings interfere with a headline block?
And this isn’t really semantically a headline – it’s more of an extended (3-line) tagline below the heading.
I’ll give it a try. Thanks so much, Ying.

[Steven]

Okay, that worked. I used an H4 which wasn’t defined in Customizer.
So even though I feel a little sheepish about using a Heading element because of what it looks like instead of what it means… It does accomplish what I set out to do.
🙂
Thanks for the tip.
Steve

[Ying]

Glad you’ve achieved what you were looking for 🙂

[Author]

Posts