Responsive text via css

[ferlo61]

Hi Team,
I saw a tutorial of yours to make responsive parts of text of my site via css.
I edited what was written:

@media (max-widht: 480px) {
$el .x-bg-layer-lower-image{
background-size: 300% !important;
background-position-x: 43% !important;
}
}

but it doesn’t work. Where am I going wrong?
Thank you,
Massimo

[kory]

Howdy, @ferlo61! Thanks for writing in…you mention wanting to make some text on your site responsive, but the CSS you have provided as an example is referencing a background image asset. Could you please provide a live link to your website and reference exactly what it is you’re trying to achieve? That should give us some more context to appropriately assist you on this, as we currently don’t have enough to go on here. Once we have that, we will be happy to take a deeper look into things…cheers!

[ferlo61]

Thank you for your response.
The site is www.ferlito.it and I would like the texts when viewed on a smartphone to be visible and not halfway.
Basically make everything responsive.
Thanks

[Regnalf]

Maybe this css help too, i’m using it for font-size calculation:

html {font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1400 - 300)));}

h1, .h1 {font-size: 3.0rem; margin-top: 1.5rem;}
h2, .h2 {font-size: 2.3rem; margin-top: 1.2rem;}
h3, .h3 {font-size: 1.9rem; margin-top: 1rem;}
h4, .h4 {font-size: 1.5rem; margin-top: 0.8rem;}
h5, .h5 {font-size: 1.2rem; margin-top: 0.5rem;}
h6, .h6 {font-size: 1.0rem; margin-top: 0.3rem;}

You can find more information here: https://css-tricks.com/snippets/css/fluid-typography/

Hope that helps

[marc_a]

Hi @ferlo61

Thanks for reaching out.

I just check your website and you are using rem unit. I suggest that you will use the vw instead of rem CSS unit for your typography because this will help you eliminate your issue on the mobile view.

For more information about the vw unit, please check this out.

*https://www.smashingmagazine.com/2016/05/fluid-typography/

@Regnalf Thank you for sharing your ideas.

Hope that helps.

Thank you.

[ferlo61]

Very, very well!
Thank you so much
Massimo

[marc_a]

Hi Massimo,

You’re welcome and it’s our pleasure to help you. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.