Forum Discussion

James_Bonney's avatar
James_Bonney
Community Member
11 months ago

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...
accessibility
e-learning development
rise 360
James_Bonney's avatar
James_Bonney
Community Member
10 months ago

Hi SamHill 

Thank you for your explanation.

Sorry if this is stupid, but can you explain the {selector} part to me, or provide a useable example that I could adapt? I'm not too familiar with the different tags, or CSS.

Thanks
James

SamHill's avatar
SamHill
Super Hero
10 months ago

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's avatar
    James_Bonney
    Community Member
    10 months ago

    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

    • SamHill's avatar
      SamHill
      Super Hero
      10 months ago

      Hi James, I didn't see an invite come through yet.

      • James_Bonney's avatar
        James_Bonney
        Community Member
        10 months ago

        Hi Sam,

         

        Thanks, I just resent it.

    • SamHill's avatar
      SamHill
      Super Hero
      10 months ago

      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_Bonney's avatar
        James_Bonney
        Community Member
        10 months ago

        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.