Mobile heading overlapping on mobile

[huylam1]

Hi there,

The main title heading is overlapping each other if the title is too long on the blog index page. I have attached an image. Please help. Thank you.

[thai]

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

@media (max-width: 480px){
    h1.entry-title {
        line-height: 1.3;
    }
}

Hope it helps

[huylam1]

Hi there,

No, that didn’t seem to work. The heading is still overlapping. Please help. Thank you.

[Prasant]

Hello @huylam1,

Thanks for updating the thread.

Please replace above CSS with the following and place under X > Launch > Options > CSS:

@media (max-width: 480px){h1.entry-title {line-height: 1.5 !important;}}

Thanks.

[huylam1]

Hi,

Thank you for that. It works on portrait mode for my phone now, but landscape and tablet devices are still overlapping.

[nabeel]

Hi again,

It looks like you’ve added custom CSS that is conflicting with the headings. Please review your added CSS and remove the code that is causing the issue. In the mean time please add the following code in your Customizer:

.entry-header h1 {
    line-height: inherit !important;
    margin-top: inherit !important;
}

Hope this helps!