[MakkBlakkParticipant]

Hi

I have found that the header text will not resize correctly when I increase the letter spacing. This becomes evident on a mobile in portrait

Also the text size will not increase when the size is changed in custom .css

[MakkBlakkParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for writing in! I’d recommend that you clear your caching plugin, since you have installed W3 Total Cache, and disable it during development. This can cause Customizer changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Please let us know how it goes.

[MakkBlakkParticipant]

Hi

Turning off the Cache plugin makes no difference.

The spacing adjustment works but not the font size adjustment

[Rue NelModerator]

Hello There,

Please update the JS code:

(function($){
  $(document).ready(function($){
    $('a.x-brand').before('<span style="color: #fff;" class="custom-headline resp-logo-text">London</span>');
    $('a.x-brand').after('<span style="color: #fff;" class="custom-headline resp-logo-text">Boston</span>');
    $(".resp-logo-text").fitText( 1.3, {minFontSize: '20px', maxFontSize: '60px'});
  });

  $(window).on('load scroll', function(){
    $(".resp-logo-text").fitText( 1.3, {minFontSize: '20px', maxFontSize: '60px'});
  });
})(jQuery);

After saving, please clear your plugin cache first before testing your site.

Hope this works out for you.

[MakkBlakkParticipant]

Where do I adjust size and spacing now?

[Rue NelModerator]

Hello There,

In your JS code you have added fitText function so that the text will be responsive. You have set the font size to have a minimum of 20 pixels and a maximum of 60 pixels. Please take note that the calculation will be based on the container of the text which is the span tag. Please also note that the spacing is based in your custom css code that you have added in your customizer. You have this code to handle the widths:

.masthead-stacked .custom-headline {
    width: 35%;
    display: inline-block;
}

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[MakkBlakkParticipant]

What I want to achieve is to be able to increase the size of the font to match the custom headline font size.

Also to have some control over the spacing, although I realise this may have some restrictions to keep the text responsive.

hope this make it clearer…

[RadModerator]

Hi there,

I guess there is still a confusion, are you referring to the header as where logo and menu is? Or is it the heading like titles within the content?

I can see instances of responsive text but applied for only one heading, and it’s Project 141 custom headline. Responsive text works on that specific custom heading. Maybe what you need to do is add resp-h to other custom headline’s class too.

I might be wrong, maybe you intentionally didn’t apply responsive text to other headings? Please clarify which heading isn’t working.

Thanks!

[MakkBlakkParticipant]

Sorry
To clarify:

The area where the logo is

London & Boston do not seem to change in size when I change the values in .css

I do not understand why resp-h is only on one heading so I will add and test.

[Rue NelModerator]

Hello There,

The font size of London and Boston is controlled by the fitText function or the responsive text feature. To be able the font size with your custom css, you have to add !important to your code. For example:

.masthead-stacked .custom-headline {
  font-size: 60px !important;
}

And once you have that override, the text will no longer be responsive. unless otherwise you will have a responsive css that will do that like this:

.masthead-stacked .custom-headline {
  font-size: 60px !important;
}

@media(max-width: 979px){
  .masthead-stacked .custom-headline {
    font-size: 24px !important;
  }
}

Hope this helps.

[MakkBlakkParticipant]

Ok

I put in the last code to keep the text responsive (I have added font type and uppercase) but on a mobile the N from London is obscured by the logo and the N from Boston almost goes off the page. Is there something to add to the code or needs adjusting?

Another query on text separate from the above

If I want to space the letters of CREATIVE different from BLACKMINT Can this be done?

[ZeshanMember]

Hi there,

Add following CSS code as well:

@media only screen and (max-width: 480px) {
  .masthead-stacked .custom-headline {
    font-size: 16px !important;
  }
}

For your second query, add following CSS under under Style field of the headline settings (see: http://prntscr.com/7qeof1):

line-height: 1.5;

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in-depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[MakkBlakkParticipant]

Of course.

Would this be a future develpment where one can add custom text and have the responsive and size options work?

Or have lines of text individually customisable?

Thanks for all your help as always 🙂

[Paul RModerator]

Hi,

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[Author]

Posts