Docs

[crydberg]

Hi again, that did not solve the problem. Now I have deleted the custom script since it was only added because you guys recommended it, but it did not work.

Can you please read ALL the text above before answering so you know what has been done, and what our problem really is. We did not have any problem with our headlines at first ONLY the BODY COPY (please watch the film).

Now, however, we have a problem with the headlines as well..

Any suggestions?

[Rad]

Hi there,

Responsive text works okay, max font size doesn’t mean it will be your initial font size. It will calculate the font size based on current container’s size plus compression and apply it as long as it doesn’t reach the font size limit (eg. 80px).

Example, if you have two containers with different max font size (eg. 80px and 40px) but it happens that both containers have the same size with the same compression, then it more likely going to have the same font size. Eg. 30px for both 80px and 40px max.

But if you wish to have 80px size on the desktop, then you can always do that with CSS. Example,

@media (min-width: 980px) {
.h2-responsive {
font-size: 80px !important;
}
}

Hope this helps.

[crydberg]

Hi.

Okey. I’m going to try to explain our problem one more time.

When we open our webpage (Indentive.se) the page doesn’t load the right settings properly – AT FIRST.

Watch the two movies here https://www.dropbox.com/sh/e1xxlptqvn1v0mf/AACzR69DBDuS2AMCWzRvgjesa?dl=0
One movie shows how the problem looks on a computer screen and the other how it looks on a mobile screen.

In the movie of the mobile screen:
– At first, when the page is done loading, the first row in the body copy says; “Indentive makes things available. Streaming a movie,”. NOTE: It ends with “a movie,”.
– After changing to landscape and back to portrait the first row ends with “Streaming a”. NOTE: The word MOVIE is placed on a new row.

Obviously it’s because the font size has changed.

And back to our problem. We want the screen to look like it does after the screen has been rotated because those values are the ones we have decided on.

Why doesn’t the page load properly from the beginning – why is it correct ONLY AFTER the browser has been changed somehow (either rotated as you can see in the phone movie, or when the browser width has been changed as you can see in the other movie).

The problem isn’t that our text isn’t exactly e.g. 80 px from the start – our problem is that the page doesn’t look as it’s supposed to at first, but after it has been changed it does. People should not have to change the browser in order to see the correct look….

[Rad]

Hi there,

I don’t see that as a problem for mobile, font changes because the width changes too when it change orientation. How should it behave?

And for desktop upon checking it multiple times, I’m able to reproduce the issue, on Safari at least twice. But I never see that issue on other Mac’s browsers. Windows browsers rendering are fine too, same scripts same files.

Let’s try triggering the load and resize event manually since it randomly fails on Safari. Please add this code to Admin > Appearance > Customizer > Custom > Javascript.

jQuery( function($) {

function re_trigger_render() {

$( window ).trigger('resize');

}

$( document ).ready( re_trigger_render );
$( window ).load( re_trigger_render );

} );

Hope this helps.

[crydberg]

It works now, thank you!

[Friech]

We’re delighted to assist you with this.

Cheers!

[Author]

Posts