Forum Discussion
James_Bonney
11 months agoCommunity Member
Responsive font on Rise
Hi All, Does anyone know of CSS code to make larger font responsive on Rise? This is a Header block, with size 64 font. It looks great on PC/laptop, but on mobile words are spanning two lines whi...
SamHill
10 months agoSuper Hero
Would you be able to invite me to the course in Review360 or send me a copy (Sam.hill@rebusmedia.com) I can then provide the required CSS.
James_Bonney
10 months agoCommunity Member
Thanks Sam, I've just shared a stripped down version with you on Review, so it's just the troublesome Header block.
When you view as a mobile in preview, you'll see what I mean.
Thanks
James
- SamHill10 months agoSuper Hero
Hi James, I didn't see an invite come through yet.
- James_Bonney10 months agoCommunity Member
Hi Sam,
Thanks, I just resent it.
- SamHill10 months agoSuper Hero
Hi James, something like this. But be aware, you'd need to check all device screen sizes and adjust accordingly:
/* Global Style to stop words breaking on the first H2 in the page */ div.page__content > section > div:first-child h2 * { word-break: keep-all; overflow-wrap: normal; } /* Add font-sizes for the target screen sizes where max-width is the maximum device screen width the style will be applied */ @media(max-width:375px) { div.page__content > section > div:first-child h2 * { font-size: 4rem !important; } } @media(max-width:475px) { div.page__content > section > div:first-child h2 * { font-size: 4.5rem !important; } }- James_Bonney10 months agoCommunity Member
Hi Sam
Thanks for taking the time to get back to me. Looking at the effort/reward, we're just going to reduce the overall font size down from 60+ to 44.
Related Content
- 12 months ago
- 4 months ago
- 3 months ago