Thrive is not displaying across small screens at a relatively proportionate size or line height

[BigActual]

Bug Report

Thrive is too small on very small handheld devices. and when the line wraps the line height is too high in the paragraph.

What's the issue you encountered?

Thrive is only a problem on the home page as far as I can tell, but please double check templates that use it. The Page titles seem disjointed in size across pages. We have made many changes here and I'd rather move toward standardization and have the same display size across templates.

The line height issue was observed on the Memory Care page.

Have you hard-refreshed your Browser? (Control+F5 on a PC, CMD+Shift+R on a Mac)

Yes

How can the issue be reproduced?

Chrome inspector or use a phone to view the site.

Link to the page in question:

Screenshot of the problem:

What does your environment look like?

chrome inspector mac mojave iphone 5 actual

• What Operating System are you running? (Windows 10, Mac OS X, Android, iOS, etc.)
• What Web Browser are you using?
• What is your screen resolution? (If you're on a mobile device, you can just list your device here)

Additional context?

[BigActual]

This may tie back into #5

[d4mation]

Nope, this was caused by the change we made to the Hero Text on Small Screens specifically. I had some pretty strict styling there to ensure it scaled everything down to that size, but it also caused the Thrive text to not scale to its normal, proportionate size.

We originally only had this apply to the Home Page because it was the only page with Hero Text at the time... but now basically every page has the Hero Text in some fashion.

Should all pages have the Hero Text scale to 16px on Small? We did this due to sizing issues and trying to not obscure the entire image. But we've also changed the Hero Sizing itself a lot since then, so it may not be as important anymore.

[BigActual]

I'd like to close this one but noticed that the <h1> is not consistent across templates. The client identified this display of the <h1> as troublesome on his iPhone. The size of the H1 on the home page in handheld portrait makes the copy hard to read. The position of the <h1> on the home page is ideal. The <h1> size on other templates in a handheld is larger and preferred for now, but the position is low.

The output of the <h1> size on the home screen template is controlled by a more specific

.home .featured-hero .marketing .tagline * {
    font-size: 16px !important;
}

Nope, this was caused by the change we made to the Hero Text on Small Screens specifically. I had some pretty strict styling there to ensure it scaled everything down to that size, but it also caused the Thrive text to not scale to its normal, proportionate size.

We originally only had this apply to the Home Page because it was the only page with Hero Text at the time... but now basically every page has the Hero Text in some fashion.

Should all pages have the Hero Text scale to 16px on Small? We did this due to sizing issues and trying to not obscure the entire image. But we've also changed the Hero Sizing itself a lot since then, so it may not be as important anymore."

Due to the client's input, that this is troublesome. Please remove the specific sizing on the home page and move the position of the <h1> up, on subsequent templates to match the position on page Note, This is a specific position adjustment for small screen sizes