How can I re-scale the text of homepage on phone preview?

Question

We have a problem with the text "A GOLDEN JOURNEY TO EVERYWHERE" on the home page of our website

The text on the homepage is in large scale and there’s no problem with monitor/ tablet screen preview of it. But for mobile phone screen, the text won’t be re-scaled and it is too large that it won’t be shown completely on phone screen and a few letters are missing from each side.

How can I customize the text’s size also for phone preview to solve this problem.

CSS code :

/** Start Block Kit CSS: 144-3-3a7d335f39a8579c20cdf02f8d462582 **/

.envato-block__preview{overflow: visible;}

/* Envato Kit 141 Custom Styles - Applied to the element under Advanced */

.elementor-headline-animation-type-drop-in .elementor-headline-dynamic-wrapper{
   text-align: center;
}
.envato-kit-141-top-0 h1,
.envato-kit-141-top-0 h2,
.envato-kit-141-top-0 h3,
.envato-kit-141-top-0 h4,
.envato-kit-141-top-0 h5,
.envato-kit-141-top-0 h6,
.envato-kit-141-top-0 p {
   margin-top: 0;
}

.envato-kit-141-newsletter-inline .elementor-field-textual.elementor-size-md {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
}

.envato-kit-141-bottom-0 p {
   margin-bottom: 0;
}

.envato-kit-141-bottom-8 .elementor-price-list .elementor-price-list-item .elementor-price-list-header {
   margin-bottom: .5rem;
}

.envato-kit-141.elementor-widget-testimonial-carousel.elementor-pagination-type-bullets .swiper-container {
   padding-bottom: 52px;
}

.envato-kit-141-display-inline {
   display: inline-block;
}

.envato-kit-141 .elementor-slick-slider ul.slick-dots {
   bottom: -40px;
}

.pth-hero__background-inner {
background-size: contain !important;
}

.light.css {
   font-size:70%
}

@media screen and (max-width: 375px) {
   div.pth-hero__message.skrollable.skrollable-between h2{ 
           
           letter-spacing: -3PT;
}
   
/** End Block Kit CSS: 144-3-3a7d335f39a8579c20cdf02f8d462582 **/ ```

Answer 1

Since 'clamp' arrived in all major browsers there is a very convenient way to define a responsive font size with a minimum and a maximum size:

// using clamp for responsive font sizes:
clamp([min-size], [default-size], [max-size]);


.myText {
  font-size: clamp(1em, 2.5vw, 3em);
}