[Resolved] in paragraph: enlarge spacing between words

[John]

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

[Fernando]

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.

[John]

That was fast. Thanks, Fernando.

I added them simply as text: Paragraph.

John

[Fernando]

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

[John]

Thanks, Fernando.
Superfast !

Let me give it a try.

[Fernando]

Alright. Let us know how it goes.

[John]

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?

[David]

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.

[John]

Brilliant, Dave !

Take a look:
https://understand-culture.com

Many, many, many thanks.

John

[David]

Looks good , glad to be of help!

[John]

I really like the look, Dave.
Many great thanks !

John

[David]

That makes my day – Glad to be of help

[Author]

Posts