Heading (f.e. H1, ..) same width as text/content

Hey padweb,

Thank you for the inquiry.

Did you select centered layout in the Heading Style settings? Try selecting left or right layout to move the edge of the column instead of aligning the heading at the center of the column.

Best regards,
Ismael

Hi,

The heading then moves to the appropriate edge (left or right), however my wish for the heading content (text) to stretch across the entire column width has
not yet been fulfilled. But as mentioned in the first post, I don’t even know if this is possible at all?

This is possible as long as the heading is not center aligned. You can also try and set the text alignment to “justify”. Please provide the site URL so that we can check the issue properly.

// https://developer.mozilla.org/en-US/docs/web/css/text-justify

Best regards,
Ismael

Hi,
Thank you for your patience, to center the special heading and the subheading below it try adding this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#support .flex_column_table h1.av-special-heading-tag {
   text-align: center;
}
#support .flex_column_table .av-special-heading .av-subheading_below {
	text-align: center;
}

Then to make the special heading full width add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_stretch_text_script() { ?>
  <script>
(function($) {
$.fn.stretch_text = function(){
    var elmt          = $(this),
        cont_width    = elmt.width(),
        txt           = elmt.html(),
        one_line      = $('<span class="stretch_it">' + txt + '</span>'),
        nb_char       = elmt.text().length,
        spacing       = cont_width/nb_char,
        txt_width;
    
    elmt.html(one_line);
    txt_width = one_line.width();
    
    if (txt_width < cont_width){
        var  char_width     = txt_width/nb_char,
             ltr_spacing    = spacing - char_width + (spacing - char_width)/nb_char ; 
  
        one_line.css({'letter-spacing': ltr_spacing});
    } else {
        one_line.contents().unwrap();
        elmt.addClass('justify');
    }
};


$(document).ready(function () {
    $('#support .av-special-heading-tag').each(function(){
        $(this).stretch_text();
    });
});
}(jQuery));
</script>
  <?php
}
add_action('wp_footer', 'custom_stretch_text_script');

Please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Thanks for the feedback, I don’t see the javascript in your page source code, please ensure it is in your child theme functions.php file and that you copied the code from the forum and not an email notification so the symbols were not converted.
In the code you should see > and not >
If this looks correct please include an admin login in the Private Content area below so we can assist further.

Best regards,
Mike

Hi,
Thanks for the login, I made an error in the code I posted above, I corrected and it’s now working, please check.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike