Archived topic
Vertical Alignment Header Element
7 replies · Started by Adam on November 15, 2022
Hi,
I cannot figure out why the "XX Minute Read" in the single post header element is not aligned with my name.
Hi there,
edit that element, and use a GB Headline block to add your Reading Time shortcode.
Then set the HTML Tag (eg. H1, H2, H3 etc ) of the Headline to DIV
I assume you have a Shortcode eg. [reading_time] in your element.
If so, the Add a new Headline Block, and were you would normally type some text, add the shortcode.
Hi Adam,
Shall we keep the conversation here instead of via private emails?
I just checked your site, the reading time is not showing, but the shortcode itself is.
https://www.screencast.com/t/8Y9FPr9QKm1G
Does it stop working using a headline block?
Yes, it does stop working.
Were you using a shortcode block before? If so, can you switch back to the shortcode block?
And add an additional CSS class to the container block which contains the shortcode, eg.reading-time-container, then we should be able to target that shortcode and add CSS to style it.
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
Done. I got it to look ok on desktop, but mobile the spacing is still off.
1. The author name container has a 5 px margin-bottom on the desktop, so in order to look the same, the reading time container's margin-bottom should be set to 5px as well, it's currently set to 9px.
2. The author name container's line height is set to 24px, while the reading time container's line height is set to 1em which is 14px. So try to set the reading time container's line height to 24px.
