Changing text size for different platforms?

[Benjamindcooperdp]

Hi there,

So i’m thinking this should be relatively easy, but for whatever reason I can’t figure it out.

I have text on some pages of my website,

on the preview for laptop/computer I have text set at 14pt

For tablet and for phone, the 14pt text looks to big,

so I change the text size to 12pt (using the image below where it says AA), on the preview for tablet, but it changes the size of the text on the preview for computer to 12pt rather than keeping it to 14pt.

I’ve tried keeping the computer preview to 14pt and only changing the mobile text to 12pt and the text changes to 12pt across all previews?

Anyone help with this please?

Many thanks

Ben

[Andre]

Hey Ben,

You are able to set a global font size for each viewport via design in the top right menu:

When you now switch to tablet and change that size, it will adjust.

Changing the fontsize in the texteditor overwrites the global setting of course. Just in case you like to use a different size somewhere on the site.

[Benjamindcooperdp]

Hi Andre,

Thanks for getting back to me so super quick!

So I have the global font size set to 14 (thats what I’d like on computer preview).

I flick to tablet preview and change the ‘font size’ in the design (your screen grab) to 12pt, and nothing changes, it stays at 14pt.

I flick to mobile preview and change the text size to 12pt and it still stays at 14pt.

Sorry, I may have misunderstood what you were saying?

Many thanks

Ben

[Andre]

Maybe I like to check on your website. Do you like to give me the ID and the exact location of the element / text?

[Benjamindcooperdp]

Hi Andre, again thanks for coming back to me so quickly, much appreciated.

Sorry, website design is really not my skill set, learning as I’m going.

I’m not sure I know what you mean by ID and the exact location of the element/text?

I’ve attached a screen grab, when I’m in mobile preview, I go to design, change the text size from 14 to 12, and some of the text changes to 12, some stays at 14.

The title (in orange) always stays at 14, the title isn’t a headline, it’s the same text as the main body, if that makes sense?

website is www.benjamindcooepr.co.uk

London director of photography - Benjamin D Cooper | Filmmaker & Cinematographer | London-Based Visual Artist ​

I’m currently editing it, so the new text I’ve been doing this morning hasn’t been published.

Many thanks

Ben

[Andre]

Hey Ben,

the Website ID is the 6/7-digitnumber. You are able to find it at the end of the URL when you are in the Website Builder (CMS). Example: https://cms.sitehub.io/1234567

The exact location would be the page and a rough location there so I check the correct text elements I will find the text with the info, no worries. But the ID is important

[Benjamindcooperdp]

Thank you Andre

is this what you mean?

Login

[Andre]

Nope Its the URL, when you are inside the Website Builder / CMS where you can make changes to your website.

[Benjamindcooperdp]

sorry, did say not my area of skills lol

This one?

1754823

[Benjamindcooperdp]

This is one page that has a lot of text on it,

London director of photography - Benjamin D Cooper | Filmmaker &...

I’ve just tried what you said to do originally, it changes all of the text from 14 to 12 apart from the first two sections, which still stay at 14pt and none of the titles change from 14 to across the page, the titles aren’t headlines, just normal text. Not sure if thats of any help?

Thanks

Ben

[Benjamindcooperdp]

Hi Andre,

Was just wondering if I need the text on (global),

rem

or

px

Would that make a difference? as it’s currently on px.

Thanks

Ben

[Barbara_Bichler]

You should definitely use rem instead of px for mobile devices. And don’t set specific font sizes in text elements (clear the text format with the eraser if already happened). Otherwise your design is going to get a total mess.

[Andre]

Hey Benjamin,

do not worry, First of all, you did a great job already and now I even know who you are (movie addict here and I recognized some of your work). Can not wait to see the finished site to read more about your work

You did a very amazing job already on your website. Great idea setting this all up like you did and impressive vision for somebody who says its not their skill set.

I recommend starting like this:

Clear your formatting for each text using the “clear format” button in the text editor.

Because they overwrite the global settings in simple words.

Set yourself a structure for the different headlines H1-H6 as well as text.

Start with the desktop. Define which H should have which size and color. Be aware about this

If you want to dive deeper into this → Header Tags: A Simple (But Complete) Guide To H1, H2 and H3 Tags

Then, when you think your text, headline and all look great on Desktop, switch over to Tablet and then Mobile.

You will see different coloring on the viewports. They will be reflected on the fields like font-size etc. as well. More on this here: https://help.sitejet.io/hc/en-us/articles/24275878741015-Responsiveness

Stick to your plan and check this then for Tablet and Mobile view.

As @Barbara_Bichler said, this is one good way - go with REM for mobile and see for yourself. You can always check your website on your own phone directly via the Preview Link.

If you think you need to format a certain part of the text differently do it in your text editor. But, keep it simple.

Oh and how you managed the /home images with the buttons to the right section of the subpages is amazing. Good work!

[Benjamindcooperdp]

Andre, bless thank you mate, not only for your kind words but also for all the detailed advice you have given me, really very much appreciated!!!

I’m going to be diving into this over the next few days, will let you know how I get on, but with so much advice it should be relatively straight forward.

Thank you once again for spending the time to help me with this.

Have a great day mate!

[Benjamindcooperdp]

Thank you Barbara, much appreciated for your help too

[Andre]

I will be back on Monday for you, if you have more questions about this topic.