[Resolved] Dynamic headline block disappears when I enlarge from H2 to H1 font size

[Michael]

Might be a GB question, but anyways.. hopefully it’s a quick answer for you guys.

Have a reusable block for post header, which pulls in the title and feature image.

All was peachy until I adjusted the font size to H1, and the whole block disappeared on the front end. I change it back to H2 and it comes back.

It’s a 2-wide GB grid with text and image containers.

Here’s a screenshot image <<—-

Link to site in private info

Thanks!

[David]

Hi there,

in Customizer > Additional CSS you have this:

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h1 {
    display: none;
}

Which is hiding the H1 ….

If you need that elsewhere but would like it to ignore the GB Headline then change it to:

.learndash-wrapper .ld-focus .ld-focus-main .ld-focus-content h1:not(.gb-headline) {
    display: none;
}

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

[Michael]

Hi David!

Thanks a bunch- I just wanted to create my own page title instead of the built-in LearnDash post title, so I hid it. Perhaps there was another selector that would have done the trick without nuking all H1 typeface?

Anyhow- your CSS fixed it! If there’s a modification that would make it simpler to accomplish the above, please advise.

Michael

[Michael]

David, can I piggy back on one more quick question as it is directly related to layout/formatting in LearnDAsh?

They have a ‘focus mode’ that I’m sure you’re aware of. This mode has a slideout sidebar menu in the tablet and mobile view.

The slideout reduces the container width in a way where the GB responsive settings don’t trigger/restack the containers in the grid. It also jacks up the hero in a non-responsive way.

https://www.dropbox.com/s/u3ytn1adxcb1ma0/LD%20slideout%20tablet%20issue.png?dl=0 <— screenshot

Is this a Z-indexing conflict, or something that should be fixed another way?

Michael

[David]

Hmmm….tricky one.

Couple of options:

a. Make it so the slideout overlays the main container when opened.

@media(max-width: 1024px) and (min-width: 769px) {
    .learndash-wrapper .ld-focus .ld-focus-main {
        margin-left: 50px !important;
        width: calc(100% - 50px) !important;
    }
}

OR

b. Force the GB Columns to 100% width when the sidebar is open on screens up to 1400px wide ( adjust @media accordingly ):

@media(max-width: 1400px) {
    .learndash-wrapper .ld-focus:not(.ld-focus-sidebar-collapsed) .ld-focus-main .gb-grid-column {
        flex: 1 0 100%;
    }
}

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

[Michael]

Hi David-

You’re a CSS god. Thank you! I prefer the slide over option… as long as my students can figure out how to slide it back. I guess if they click the arrow, they’ll know to click it again.. like a mobile menu.

As always- amazing support. thanks

Michael

[David]

Thank you 🙂 Glad to be of help!!

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

[Author]

Posts