Line break in heading for tablet & mobile

[Hasan]

Hi!

I’ve created a block element with GenerateBlock which is looking nice on desktop, but need to bring a line-break on a specific place on tablet and smaller views.

On the first big header that says “Travel Bangladesh in Budget”, I need to show the “in budget” part on a new line for tablet and mobile devices only. How can I do that?

Thanks!

[David]

Hi theres,

try adding this CSS:

@media(max-width: 900px) {
    .home .site-header + .gb-container h1.gb-headline {
        max-width: 14ch;
        margin: auto;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hasan]

Got it, thanks! 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts