Text not responsive

Hi experts,

Please help, when I open my site on mobile, the text range not responsive. kindly have a look of the text sample below:

How to make the text of 'rumahhosting.com' responsive.

 

Hi.
One way is to wrap it in a block, center text-align it and resize font-size with vw units. Use the last rule only on narrow screen width. On wide desktop / landscape view, remove that last rule.

Hendra

 

Thanks for the reply but I don't know how to apply what you mean. If you don't mind, would you please give me the steps?
Thanks.

 

Untested, but it'd be something like:
HTML:

    <h1>
       Super murah promo domain dan hosting di
       <span>RumahHosting.com</span>
     </h1>

HTML:

CSS:

        h1{
           font-size: 3em;
         }
         h1 span{
           display: block;
           font-size: 10vw;
           color: red;
           text-align: center;
         }
       @media screen and (min-width:30em){
         h1 span{
           display: inline;
           font-size: inherit;
           color: blue;
           text-align: left;
         }

Code (CSS):

 

My advice, use a media query to make the text freaking smaller so you aren't wasting three-quarters a screen worth of space on 7 lousy words.

Word-wrap:break-word might help too since it will force a line-break when the word is too big to fit.

Also, that logo needs some serious help in the "WCAG, what's that?!?" department.

 

Thanks again, unfortunately, it's not working on my theme, or maybe I don't apply those correctly but I put the code in the main css on my theme, when I open on mobile, it's still the same.

 

Put your related HTML + CSS code here for us to see.
Or perhaps a URL link to your test page is better?

 

Hi, I appreciate it but that's fine. I just let it as it's, no problem, thank you so much.