Responsive header widths

[whitelobster11]

Hello

I posted this a few weeks ago and the thread has since been closed (https://theme.co/apex/forum/t/responsive-text-in-headers/54670), however the responses I received are only relevant to mobile~ could someone please tell me the appropriate CSS to make all headers responsive across all platforms?

Thank you so so much! login info attached below

Hello

All of the posts on my site suffer from long words being chopped with dashes inserted into them and wrapped to the next line when viewed on mobile

I have struggled to get a clean easy way to simply make the titles on my posts resposively resize on mobile

Is there some simple way to impelement this so that it will no longer be an issue? It seems like it should be relatively straight forward to implement responsive header texts in all of my posts when viewed on mobile~ I just have not been able to figure out how and all of the tutorials I have seen in the forums seem so complicated

You can see a post on my site on this page

International Intrigue

If viewed on mobile you will see the problem

Login info attached below

Thank you so much!!!

[lely]

Hello Jared,

Try this custom CSS instead:

	.entry-content.content h2 {
		font-size: calc(35px + (70 - 35) * ((100vw - 300px) / (1600 - 300)));
	}
	.entry-content.content h3 {
		font-size: calc(35px + (70 - 35) * ((100vw - 300px) / (1600 - 300)));
	}
	.entry-content.content h4 {
		font-size: calc(35px + (70 - 35) * ((100vw - 300px) / (1600 - 300)));
	}

Change 35 and 70 accordingly for each headline. 35 is the smallest font size you want that will fit on mobile view and then 70 the largest font size on desktop.

Hope this helps.

[whitelobster11]

Thank you for this

unfortunately it didn’t seem to help

is some other snippet of css conflicting?

you can see it still rendering unresponsively at https://www.motherculture.love/2019/02/06/stacks-1/

[friech]

Hi Jared,

Thank you for writing in, please navigate to Theme Options > Typography and adjust your Root Font Sizes, please set the font-size for XS and SM to 10 or lesser (see where it fits)

Unfortunately, there are still headlines that will be cut off like that word ASSADOURIAN that’s just too lengthy, what you need to do with that is you need to make that smaller, currently, you set that as H1 that is why its too big, what you can do with that is set that as H4 instead. do that to all lengthy headline.

Hope it helps,
Cheers!