Making large text responsive

[lisacole1]

Hiya

Tiny Cat Gallery - Lisa Cole

Where it says ‘Tiny Cat Gallery’ and “Think outside the box” I’d like that text to be huge so it fills the whole width of the screen.
I tried doing this with em but the text wraps on a phone.
Any pointers to what I’m doing wrong would be appreciated.

[prakash_s]

Hello @lisacole1,

Thanks for writing to us.

You can use the “Viewport Width” unit in your font-size to get responsive and fluid typography. Please have a look at these articles.

Responsive And Fluid Typography With vh And vw Units — Smashing Magazine

Fun with Viewport Units | CSS-Tricks

https://www.w3schools.com/howto/howto_css_responsive_text.asp

You can try this custom CSS code to get fluid font-size. Add this custom CSS code in X-->Theme Option ---> CSS

For Tiny Cat Gallery section

.e1061-4.x-text h4 {
font-size: 5vw;
}

For Think outside the box section

.e1061-7.x-text h5 {
 font-size: 4vw;
}

Please feel free to change the font-size value as per your design.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[lisacole1]

@PrakashS

.e1061-7.x-text h5 {
 font-size: 4vw;
}

Thank you, I didn’t know such a thing existed!
The code you gave me confuses me though
I already have this, can I just swap out the font-size to be a vw instead of em or is the “.e1061-7.x-text” important? I tried swapping out the font size and it didn’t work.

h4 {
font-family: ‘Ubuntu’, san-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 1;
letter-spacing: 0.1em !important;
}

[tristup]

Hi @lisacole1,

It seems that the following code is already implemented with the .e1061-4.x-text h4, and the code you mentioned is not affecting the font-size of that section.

.e1061-4.x-text h4 
{
    font-size: 6vw;
} 

Please let me know if you are still having any problems with this.

Thanks.