headings out of the screen in mobile version

cvaldivia · June 2015

all the headings are out off the screen in the mobile version, how we can fix this? so the entire heading is in the screen. i search for this problem in the forum but i cant find anything on this matter. i set everything responsive on responsive settigs in muffin options and the issue persist. My page is wiseconn.cl

i will really appreciate some help thanks!!

cvaldivia · June 2015

also can this shortcode that i found in one of your demos also responsive?

[google_font font="lato" size="48" weight="700" italic="0" color="#ffffff" subset=""]xxxxx[/google_font]

thanks!!!

Albert · June 2015

Hi,

probably words are too long and that's why headings are out of the scree. To wrap headings into small screens, please use below css:

h1, h2, h3, h4, h5, h6 { word-wrap: break-word !important; }

About google fonts, yes, these are responsive.

cvaldivia · June 2015

thanks that work, i also apply the fix to the google font shortcode and also work, the only thing now is that the fix break the word and that doesnt look very good, actually its look confusing when someone wants to read it, its there a way to decrease the font even more so the word doesnt break?

Thanks in advance

Albert · June 2015

If you want to decrease these headings on mobile devices, then you must use below css:

@media only screen and (max-width: 479px) {
    h1, h2, h3, h4, h5, h6 { font-size: 10px !important; }
}

cvaldivia · June 2015

work nicely thanks so much

Albert · June 2015

You're welcome

headings out of the screen in mobile version

Comments

This website uses cookies