Docs

[bak]

Hi

1) How can I make sure that the custom headline scales correctly? If cuts off to the right

2) Some text appears center aligned on mobile altough its left aligned on desktop

[bak]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width: 767px) {
    h2.h-custom-headline.h4 {
        font-size:170%!important;
/*         Center the uncentered custom headline on mobile - optional */
        /* text-align:center; */
    }

/*     Restore alignment settings on mobile */
    .left-text {
        text-align:left!important;
    }
    
    .right-text {
        text-align:right!important;
    }
}

Note, that the second and third rules here are to restore the alignment on mobile. By default, those are centered on mobile. Now if you want to keep them centered and fix the uncentered heading, remove the last two rules and uncomment the text alignment rule in the first CSS snippet. It should then look like this.

@media (max-width: 767px) {
    h2.h-custom-headline.h4 {
        font-size:170%!important;
        text-align:center;
    }
}

Hope this helps – thanks!

[Author]

Posts