[markwestParticipant]

Hi,
I’m using the renew stack and am having huge issues (pardon the pun) with trying to get responsive text working with the headings.
I’m trying to add responsive text tags to h1 & h2 – but there seems to be CSS in renew.css that is causing a problem –
—-
.h1{margin-top:1em;font-size:400%;line-height:1.1}h2,.h2{font-size:285.7%;line-height:1.2}h3,.h3{font-size:228.5%;line-height:1.3}h4,h5,h6,.h4,.h5,.h6{margin-top:1.75em;margin-bottom:0.5em;line-height:1.4}h4,.h4{font-size:171.4%}h5,.h5{font-size:150%}h6,.h6{font-size:100%;text-transform:uppercase}
—-
It makes the headings HUGE when using text elements with <h1>, <2> tags – which is a real problem. However – it seems to be a sensible size within a Custom Headline element?
I’ve tried to override these % font-size with custom CSS with limited success. Neither custom headline or headings within text elements seem to respond well with responsive settings added.
Please could you help me understand how to set these to px or em sizing so that adding responsive settings will work correctly? I can’t see anywhere in the theme customiser to set the base size of the headings – maybe I missed it?
Thanks for your help.
Mark

[Nabeel AModerator]

Hi Mark,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[markwestParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Mark,

Thanks for the credentials, but it seems I dont have access on your dashboard? Anyway this Custom Headline Elements are already a heading, so you don’t need to wrap it with header tag (<h1> - <h6>).

If you need multiple types of header, add another instances of Custom Headline Element.

http://prnt.sc/cl98pe

Hope it helps, Cheers!

[markwestParticipant]

This reply has been marked as private.

[FriechModerator]

Hi Mark,

Sorry but I’m little confuse, you said above:

You can see the issue on this page which just uses a text element for the title –
http://2016.thewellbeingclinic.org/nlp-neuro-linguistic-programming/

But it is on the Custom Headline element, not on text elemenet.

If you really need to hardcode this headline, place it on a RAW content element and apply a class for this.

e.g.

<h3 class="my-headline">NLP</h3>
<h6 class="my-headline"> - Neuro-Linguistic Programming</h6>

And then use that class on your responsive text settings as the selector.

http://image.prntscr.com/image/512a4718a6894e998a343c6aaff44c59.png

Play with the max-size and min-size until you get the desired look and headings does not become too large. Or if you need a custom CSS for this, the code would be.

h3.my-headline {font-size: 35px;}
h6.my-headline {font-family: 24px;}

Or you can follow my suggest above, If you need multiple types of header, add another instances of Custom Headline Element.

That means please the NLP on a Custom Headline element, and the – Neuro-Linguistic Programming on another.

Thanks.

[markwestParticipant]

Hi Freich,

Sorry if I confused you. Let me try to explain again.

I believe the source of my issue is that within renew.css the font size for <h1> is set to 400%, for <h2> it is set to 285.7% – you can see these figures in the CSS I posted in the first post, copied directly from renew.css

So, back to my test page. If you look now you will see I have a raw element, with the following HTML

<div id=”subtitle”>
<h1 class=”r-h1″>NLP</h1>
<h3 class=”r-h3″> – Neuro-Linguistic Programming</h3>
</div>

with the following CSS applied to bring them inline – nothing odd there.

#subtitle h1, #subtitle h3 {
display: inline-block;
}

I have then added the responsive text classes and created the responsive text rules – with h1 having a minimum of 16px and h3 having a minimum of 14px both with a compression of 1.5

However – when you now look at the page you will see that the h1 part (NLP) is smaller than the <h3> part – even on desktop view – only when you get to the smallest mobile width does the h1 heading become bigger.

What I am asking for is help to resolve the large font sizing to begin with in renew.css as I feel that is what is impacting the responsive text – could this be the case?

Thanks for your help.

Mark

[RupokMember]

Hi Mark,

Thanks for writing back. Check the maximum font size as well since the calculation will depend on minimum font-size and maximum font-size along with the compression.

Cheers!

[markwestParticipant]

Hi Rupok,

Ok, so I’ve added max 45 to h1 and max 30 to h3 – it’s still not working.

Please, could someone explain why the font-size’s are set so large to begin with? I’d really like to be able to set them to something more sensible across the whole site to begin with.

I’m really sorry if my initial explanation wasn’t good – I thought I had been clear – but I seem to be going round in circles

I am completely unable to get responsive text to work correctly, specifically when I am applying multiple instances of it to multiple classes on the same page.

I’ve tried combinations of min/max size, huge and small compression figures – but nothing I try gives me a consistent result – i.e h1 always bigger than h2, h2 always bigger than h3 – with all headings getting smaller as the page shrinks

I really hope you can help me get this fixed.

Thanks for your patience

Mark

[Paul RModerator]

Hi Mark,

Responsive text will not work if combined in one line as it is adjusting the font size base from it’s containers width.

You need to wrap the whole tile in just one heading

eg.

<div id="subtitle">
    <h1 class="r-h1">NLP – Neuro-Linguistic Programming</h1>
</div>

Thanks

[markwestParticipant]

Hi Paul,

Thanks for your response.

Unfortunately that’s not going to work for the look I’m after

Sadly, also, no-one has answered my original question – how do I change the HUGE font sizing set in renew.css please?

Thanks

Mark

[Paul RModerator]

Hi Mark,

You can add this under Custom > Edit Global CSS in the Customizer.

h1,.h1{font-size:400%;}
h2,.h2{font-size:285.7%;}
h3,.h3{font-size:228.5%;}
h4,.h4{font-size:171.4%;}
h5,.h5{font-size:150%;}
h6,.h6{font-size:100%;}

Change nthe percentage to achieve your desired size.

Hope that helps.

[Author]

Posts