Site logo

Archived topic

How to set "enter" / break place in HERO TITLE on MOBILE

5 replies · Started by Former User on June 10, 2020

Viewing posts 1–6 of 6

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

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;
    }
}

Damn.... You are GOD :D Thaaaaank Youuuu.

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

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

Thank You very much!

You're welcome

This archived topic is closed to new replies.