Archived topic
in paragraph: enlarge spacing between words
11 replies · Started by John on April 3, 2023
Hello Support,
Please see:
https://understand-culture.com/germany/
See the two-letter pairs in non-caps.
They switch languages.
On a smartphone small and perhaps not
always easy to tap accurately.
How can I:
-- extend the space between the pairs?
-- choose a larger font size?
Thanks !
John
Hi John,
How did you add these?
Perhaps you can replace them with a couple of GenerateBlocks Headline Blocks instead? Reference: https://docs.generateblocks.com/article/headline-overview/
Through this, you'll be able to alter the font size on Desktop, Tablet and Mobile uniquely.
That was fast. Thanks, Fernando.
I added them simply as text: Paragraph.
John
You're welcome, John! How did it go?
Basically, you just need to add a Container Block and add 5 Headline Blocks inside.
Then, make sure that the Headline Blocks are set to display - Inline. Reference: https://docs.generateblocks.com/article/layout-options-overview/#inline
Thanks, Fernando.
Superfast !
Let me give it a try.
Alright. Let us know how it goes.
Oh, wait, Fernando.
I remember why I don't want to use container blocks.
On a smartphone they get converted from horizontal to vertical.
I currently have 6 two-letter languages on a page.
Soon I will add more languages. Most likely 10 or more.
Now I know what my question is:
How can increase the space between words in a paragraph?
The two-letter words ... i.e. es for Spanish ... are
just that words.
Thanks !
John
P.S. Or is there a better way to list the two-letter
language indicators?
Hi John,
select the text block containing those links.
And in the settings sidebar -> Advanced --> Additional CSS Classes add: language-links
Update that page.
Then in Customizer > Additional CSS add this:
.language-links a {
display: inline-block;
text-align: center;
padding: 10px;
min-width: 48px;
margin-right: 5px;
margin-bottom: 5px;
font-size: 16px;
border: 1px solid;
border-radius: 16px;
}
I can modify the CSS to however you want them displayed.
I added the border so you can see the actual tap target size which will be min-width of 48px. Which meets accessibility guidelines.
Let me know.
Looks good , glad to be of help!
I really like the look, Dave.
Many great thanks !
John
That makes my day - Glad to be of help