Text size is being wonky

Design help Layout & Design
1

The big ‘what we do’ text looks fine in the designer mode, but once I see it in the preview mode; it gets larger and ends up pushing into the body text to the right. How do I put a max width on the text? It’s weird.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

I’m unable to find the text ‘what we do’ . Could you send a screenshot?

3

Hey! Thank you for trying to help! It’s in the second section of the page, with white and yellow letters over the first picture.

4

Hey! Checking if you saw this. Thank you for the help

5

There is probably an easier way for this put personally I would use some custom code for desktop!:

<style>
@media screen and (min-width: 992px) {
  .philosopy-text{
		font-size: min(7vw, 110px ) !important;
	}
}
</style>

This code uses the min() function to set the font size to either 7vw or 110px , whichever is smaller. So if the viewport is very large, the font size will be limited to 110px , but if the viewport is small, the font size will be responsive and scale down to 7vw .

Here you can read more about min(), max() and clamp(). be aware that this is a relatively new function though. min(), max(), and clamp(): three logical CSS functions to use today