[Resolved] How to set “enter” / break place in HERO TITLE on MOBILE

[Anonymous]

Hi,

Sorry for this hard topic 😉 I want to set break point(?) in TITLE in HERO on mobile – please see screenshot. I have to “to” and “w” in next verse.

https://prnt.sc/sx7mv8

The goal is to set some preferences to reach in smallest screen, text divided like this below:

Jeśli
myślisz
o sprzedaży
mieszkania
“to jesteś”
“w dobrym”
miejscu.

Best,

Arek

[David]

Hi there,

you would have to wrap each word/set in span tags like so:

<h1 class="hero"><span>Jeśli </span><span>myślisz </span><span>o sprzedaży </span><span>mieszkania </span><span>to jesteś </span><span>w dobrym</span><span> miejscu.</span></h1>

then you could use this CSS on mobile:

@media (max-width: 420px) {
    h1.hero span {
        display: block;
    }
}

[Anonymous]

Damn…. You are GOD 😀 Thaaaaank Youuuu.

Can I ask here how to make bigger logo in mobile? Also at my website.

[David]

The logo size is defined by the Menu Item height set in Customizer > Layout > Primary Navigation. You can increase it separately for mobile.

Also GP adds a little top and bottom padding – as your logo already has white space around it you can remove that padding:

.site-logo.mobile-header-logo img {
    padding: 0 !important;
}

This will increase its height a little more

[Anonymous]

Thank You very much!

[David]

You’re welcome

[Author]

Posts