Responsive Typography

Support
#1

I am having trouble getting my head around stepped vs. scaled typography in Pro. I have looked for tutorials on this site and others and not found anything. Trying various settings has not helped nor adding css media queries. For example I have h3 set to 24px for desktop/laptop. yet on my computer it is 41px, according to What the Font. In the inspector: h3, .h3 {
font-size: 228.5%;
line-height: 1.3;
}
Where does 228% come from? How do I adjust this?
Everything looks fine in the customizer when checking different devices, but when I save a view the page in another browser window, the fonts are not the size set nor do they scale down properly.

Thanks for any help.

#2

Also, soory to post again, but these errors are in the console at the site https://margjordan.com/vhp

jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
jquery.js?ver=1.12.4:3 [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
jquery.js?ver=1.12.4:3 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
cs-body.js?ver=2.0.5:sourcemap:4 [Violation] Added non-passive event listener to a scroll-blocking ‘touchmove’ event. Consider marking event handler as ‘passive’ to make the page more responsive.
jquery.js?ver=1.12.4:3 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart’ event. Consider marking event handler as ‘passive’ to make the page more responsive.

#3

Hey There,

Would you mind providing us with login credentials so we can take a closer look? Please provide following information:

Set it as Secure Note

  • WordPress Admin username / password

The errors don’t show up on my end. Would you mind giving us the steps how to replicate it?

Thanks.

#4

Look at the site on an actual Iphone, see that text does not scale down. the hero image in the header causes a scroll bar to appear on the bottom and the type runs off screen, Types for responsive sites should scale down to the size device viewed on. You can see the errors by using a developers tool like in Chrome and look at the console. Refresh screen for different device sizes and see the errors.

#5

Hi There,

I can see the issue. Since you don’t have max width for bar and using fullscreen, please check this Kory’s suggestion here: https://theme.co/apex/forum/t/pro-header-builder-and-responsive-text/458/2

Hope this helps.

#6

The thing is I just copied the sticky bars template and changed the words, a few colors and background image. Also added a collapsed nav to Bar 3. So there already was calc(12vmin + 18px) set for text and there was none in the max width for the container. After your input I turned off scrolling on all bars. But there is no max width for bar that I can find. Now I have responsive text but a header that scrolls off the page and has the collapsed menu icon off screen.

#7

Hello There,

Thanks for writing in! I have check your site and your custom headlines. Please make sure that you use the same heading level and the looks like option in the custom headline settings.

If they are not the same, the font size will differ from whatever is your settings in the typography section. In your case, the

h3, .h3 {
  font-size: 228.5%;
  line-height: 1.3;
}

will not work because it will get the settings from:

h4, .h4 {
  /* the style */
}

To have a fully responsive text or headings, you may need to apply Responsive text and manage it in Settings > Responsive Text. To know more about responsive text, please check it from our knowledge base here:


http://demo.theme.co/integrity-1/shortcodes/responsive-text/

Hope this helps. Please let us know how it goes.

#8

I changed the settings from the time of the original post because I am working on the site. I choose that setting to make the type look smaller. Maybe I haven’t communicated the issue well. let me try again:

  1. using the custom headline shortcode changes the size but is not responsive, it does not scale down in size with smaller screens. And is not global.

  2. Using responsive text in settings means you have to set every page individually. The basic typography of the site should be global, otherwise every time a client added a page or post there is an opportunity for error.

  3. My original post was concerning global typography settings. Where does 228% come from? How do I adjust it? There are no settings for header sizes, only letter spacing. the choice of “stepped” doesn’t assign size to a specific header, just all of the headers. The font weight is greyed out even though I have 2 weights chosen in templates. When I go back to templates there are 2 body copies and 2 headings, no matter how many times I delete the extra ones. Why is there not a tutorial or list of choices for these settings with explanations?

This seems way more complicated than it should be. So hopefully I am missing something. I could live without the responsive text if I could only control and differentiate the size of h1-h6.

#9

Hey there,

  1. The Custom Headline was designed to be used per page. That is so users have flexibility in creating a landing page. If all custom headlines have the same setting, it won’t be custom anymore.

  2. Yes, this is true. But, setting it per page means you have the flexibility also. Having this option site wide has a drawback in performance and also added bloat to pages that won’t use this feature. There are many use cases for that.

  3. The font size comes from the stack’s stylesheet. It is percentage based because it relies on the font size set in the Typography settings. You can override it by using the solution given in the previous reply.

h1, .h1 {
  font-size: 70% /* adjust as needed */
}
h4, .h4 {
  font-size: 50% /* adjust as needed */
}

There’s currently a bug in the Templates function so I’d recommend you disable Font Manager until the bugs are resolved.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.