WebSite X5Help Center

 
Tom G.
Tom G.
User

Change font size for smaller devices on responsive site  en

Autore: Tom G.
Visite 1422, Followers 1, Condiviso 0  

How can I chenge the font size for different screen resolutions (different devices) on the responsive site I'm creating?

For the lower resolutions (devices like tablet or phone) not all text is being displayed. I would need to change font size from 60 to 54, 48, or less.

Thank you in advace for your response!

Tom

Postato il
6 RISPOSTE
Esahc ..
Esahc ..
Moderator

Galaj, is it possible to provide a link to your site so that we might make suggestions?

Leggi di più
Postato il da Esahc ..
Tom G.
Tom G.
User
Autore

Sorry for the delay!

I just left the "welcome page" (HOME) on the server, just to give you an idea of the text sizes I want to change for smaller devices or lower resolutions. Each of the pages has following "Breakpoints" defined:

  • 1300px
  • 960px
  • 720px
  • 480px
  • 360px

I hope that you will give me an idea of how to change the size of the font for different screen widths/devices. I recently read about "bootstrap", using which it could be pretty easy to change the font size reaching the breakpoints. But I don't think, the "bootstrap" has been implemented in WebSite X5...

Thank you in advance for helping advice.

Tom G.

Leggi di più
Postato il da Tom G.
Esahc ..
Esahc ..
Moderator

Galaj, unless you can provide a link to your website it is not possible for us to make suggestions.

Leggi di più
Postato il da Esahc ..
Esahc ..
Esahc ..
Moderator

Galaj, personally I would leave everything the sizes they are, except for the word WELCOME which is just a touch too big on a mobile (if it's 60pt try 57pt?). Everything else looks great on the mobile, the tablet and the desktop

If that is not to your liking, you could create a large header big enough to hold your picture (step 2, customisation, template structure, click on menu and place inside header, click on header and change the height) , then select the picture as a background in the header.  Under header and Footer Content add any text you want, then because of the new features in V13 you can have a totally different header with different text sizes for each resolution.  If the picture won't behave properly at different resolutions, add the picture into the header (rather than as a background) and you can have a different resolution for each breakpoint.

Hopefully the above is not as confusing to read as it was to write :-)

Leggi di più
Postato il da Esahc ..
Tom G.
Tom G.
User
Autore

Thank you, Esahc, for your suggestions. Will give a try!

Leggi di più
Postato il da Tom G.