Headlines are not scaling properly on mobile

Support
#1

Hi there,
I´m currently experiencing some trouble with some of my custom headlines on mobile devices, because some of my custom headlines are not scaling properly in size. This is causing them to stretch over the boxed content in my Blog post, which is really annoying.
Here is a link to my post for reference:
http://hendel-running.de/u23em/

Does anyone know what is causing the problem or how I could avoid or fix this.

#2

Hello @shendel1,

Thanks for writing in!

Please add following CSS under X > Launch > Options > CSS to fix headline flowing out of container on mobile:

@media only screen and (max-width: 500px) {
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    word-wrap: break-word;
}
}

Let us know how it goes.

Thanks.

#3

Hi @Prasant,
I added the CSS and now everything seems to be working fine now.

Thank you very much for solving my problem and for the quick reply!

#4

Although I do have another issue. I have been wondering if there is a way to make the content for blogposts fullwidth for mobile devices. I like the boxed contents for a more natural readability on desktop, but I hate how it is wasting space on the sides on smaller screens.

Thank you in advance!

#5

Hi There,

Please add the following code to Theme Options CSS

@media(max-width: 480px) {
.single-post  .x-container.width {
    width: 100%;
}

.single-post .x-container.offset {
    
    margin: 0px;
}
}

Hope it helps!

#6

Hi Joao,
It did indeed help me! Thank you

#7

Glad to hear that. :slight_smile: