With-line distortion on mobile

Support
#1

Is there a solution for this distortion in mobile view. It happens off and on with different devices and in different browsers.

#2

Hi @tylerwhyte,

Thanks for writing in.

You can use CSS @media functionality or hidden base screen size of cornerstone.

In Hidden base on screen width, you will create another text elements or elements base on screen size.

classic element:

Element v2:

To use @media queries, you will adjust its CSS according to screensize. for example:

@media (max-width: 979px){
.yourtextclasselement{

/*your css adjustment here base on the screen size*/

}
}

Hope it helps.

Let us know how it goes.

Thanks.

#3

It does not seem to work. I put…

@media (max-width: 1800px){
.classiccustomheadline{

min-width: 350px;

}
}

#4

Hi There,

Can you please send the page URL where you have the issue so that we can suggest you.
as you have multiple license we can’t figure out which site you are talking about.

Please send it in a secure note.

Thanks

#5

Hi there,

Please try decreasing the line height of the heading elements with the red line by adding this code to the global CSS:

.with-line {
    line-height: 1em;
}

You can find more info on how to check for CSS selectors here.
Then information about writing your custom CSS here.

Hope this helps.

#6

Thanks for your assistance. It looked good on my iphone. I’ll check other devices.