Vertical text alignment

[Lorenmn]

Not sure how to title this. I have a couple of rows where I’ve added a title and used css to turn it on it’s side so it reads vertically. So far, so good, however, in the next row the title is longer than the accompanying copy so the title is breaking out of the box.

How can I make it ‘fit’?

Here’s a screenshot.

The top box title ‘ASSESSMENT’ is fine. The bottom one - RECOMMENDATIONS is too big.

Can you help?

[marc_a]

Hi @Lorenmn,

Thanks for reaching out.

I suggest that you will decrease the font-size of your titles so that it will fit within the row or you can increase the padding top and bottom of the section so that it will fit properly.

Hope that helps.

Thank you.

[Lorenmn]

Mmmm, I was hoping for something that would automate resizing. If I resize the font size or add padding, it’ll still look different on each device. Isn’t there something more helpful?

[tristup]

Hi @Lorenmn,

Can you please provide the specific page URL where you are having this issue. It helps us to diagnose the problem.

Thanks

[Lorenmn]

Hi,

Yes, of course. It’s this page > https://ot33.co.uk/housing-equipment/

Its behind a holding page so I’ve set up a login for you.

Thanks.

[prakash_s]

Hi @Lorenmn,

Fir st of all add a custom class example : custom-row in the Row , Then add a custom class custom-text in that Text element.

After that add this JS code in theme option’->js

jQuery(document).ready(function(){
var $div = jQuery('.custom-row');
jQuery(window).resize(function () {
   var height = $div.height();
   jQuery('.custom-text').css({
      'font-size': (height/10) + 'px',
  })
  })

This code increase and decrease font size height based on div height.

The purpose of providing the custom JS to show you how to add JS code to your site. Writing custom JS is outside the scope of our theme support. If you need more customization, you need to learn JS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[Lorenmn]

I’ve followed your instructions but nothing happens at all.

Instead of altering the text depending on the window size, can we force the column for the vertical headline to resize to fit?

Although, saying that, some of the headings will need to wrap too as they’re quite long. Can I do that with the text?

Otherwise, I fear I’ll have to resort to using images.

[prakash_s]

Hi @Lorenmn

I added the class names in all those rows and text elements and I updated the previous code with this code, It adjusts the font size properly

jQuery(document).ready(function(){
custom_fontsize();
jQuery(window).resize(function () {
  custom_fontsize();
 });
 });
function custom_fontsize(){
 var $div = jQuery('.custom-row');
var height = $div.height();
 jQuery('.custom-text').css({
     'font-size': (height/10) + 'px',
 });
}

You can use this code to adjust the font size

The purpose of providing the custom JS to show you how to add JS code to your site. Writing custom JS is outside the scope of our theme support. If you need more customization, you need to learn JS and learn how to use the browser’s element inspector.

Hope it helps you.
Thanks

[Lorenmn]

That works better, thanks.

However, the client is making the titles longer and longer! I’m going to try something completely different.

Many thanks for your help.

[prakash_s]

Hello @Lorenmn,

Glad that we are able to help you.

Have a great day!
Thanks