HTML Module messy text in small devices

Hi,

After update the template to the last version. The Text <p> in the HTML module, looks really messy in small devices. Please check www.burncitybeats.com/, module in third position.

Thanks in advance.

I have same problem.
3rd module header letters are over each other, and text bellow header text is in one tall column, only one character in a row!?!?
that is only on mobile devices, ether portrait or landscape.
www.procrewrecruitment.com

Hi,

Some updates about this issue?

Thanks!

I fixed problem by adding new css rules to mobile.css and small.screen.css

Works fine, but with update will be a problem. Overide.css is not working (it is turned on).

Hi

What do You mean override.css is not working ? Is it removing all code added there ? If yes than make sure "Recompile LESS" is disabled in template settings.

Hi Teibite,

Could we have some update to solve the original problem, which is the CSS of the HTML module looks really messy in small screen devices?

Thanks in advance

Hi

You said You have fixed this error, so I just jumped to Your new issue. Here is a piece of code to add to override.css to fix this issue I can see:

Code: Select all

@media only screen and (max-width:840px) {
h2 {
    line-height: 55px;
}

.gk-cols > div.col-width-60 {
    margin-left: 10%;
    width: 50%;
}

.gk-parallax-overlay p {
    padding: 60px 40px;
}
}