Hi All

Has any one figured out how to fix this issue? Specifically on mobile, when a header is more than one line, the underline goes through the second line of text?

Thanks

Have a link for the site? - I'm hoping it will trigger my memory of the solution we used

Cheers
Paul

Could you post the solution to this? One of my H1's is also long, and wraps and the little line beneath goes behind the text and looks funny on a phone.

Have a link for the site?

Cheers
Paul

martinpreshaw.com

Take a look the home page when scaled down to phone size. The line under the H1 style wraps when the H1 text is lengthy.

Thank you!

Is it just the one line?

@media (max-width:680px) {
.itemid-118 #mainWrap h1 {font-size:1.25em; padding-bottom: 10px;}
}

Try something along these lines if its just this page

Cheers
Paul

Works! Thank you again.

No problem

Just to explain the code its a media query for the h1 tag on this page only

so at that width 680px the font size changes to the value 1.25em

Cheers

HI Paul,

Do you have a solution for this if it is with more than one article?
Say something for phone, and mini ipad resolutions only? Say anything <900px - or if heading goes to 2 lines?

thanks,
Pam

Hi Pam,

You would target it more generally with the media query

You may want to use the content type if its k2 or a layout type and then the heading

Maybe orientation as well if required

Cheers
Paul