Activating Elements is causing too much space above Page Titles

[Mary]

Hi,
I’ve activated Elements in my WordPress back office and have added a Hook to be used on Posts so that I can display an author box.

My problem is, when I activate ELEMENTS, my PAGES then appear with excess space above the Page Title. All the posts are fine, no problem there, it’s just on the PAGES…all this excess space.

As soon as I deactivate ELEMENTS, the pages go back to normal. And the Home & Blog Index pages are NOT affected. Only all the other pages are, like CONTACT, ABOUT, RESOURCES, etc.

Please advise how I can fix this.

Thanks.

[David]

Hi there,

in Appearance > Elements look for a Header Element that has Location of Pages.
Delete that Element.

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

[Mary]

Perfect! Thanks so much. That solved my problem.

One other Q, can you give me the css code to style the BG color of the author box I added along with perhaps a border?

Thanks,
Mary

[David]

Ok, so you would have added some CSS for the Author Box in your Simple CSS look for this and include the extra lines i have added with the comments above:

.author-box {
    padding: 4%;
    margin-top: 60px;
    font-size: 0.8em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    /* Add background Color */
    background-color: #ccc;
    /* Add Border */
    border: 1px solid #000;
    /* Add some bottom margin if needed */
    margin-bottom: 20px;
}

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

[Mary]

Great, thanks. That worked, but is there a way to have some padding on the bottom edge to that there is white space all the way around the author box? As is, the author box runs right into the bottom of the container. Like this:
https://stillenroute.com/things-to-do-in-lake-tahoe-in-the-summer/

Also, while you’re looking at that particular post, notice that I’ve tried to make a few areas of text stand out by putting them inside a background color to set them apart. I couldn’t see any way to do that except to switch over to the block editor and put BG color there, but I can’t see how to adjust the margins so it doesn’t look great and it’s a pain in the butt to switch to block editor. Is there any way to do this kind of thing in a Generatepress post without using the block editor?

Thanks.

[Tom]

Any reason why your bottom content padding is set to 0 in Customize > Layout > Container? When that’s set to 0, anything will hit the bottom of the container. If you put a value there, it will fix the issue.

To add background colors to blocks of text like that (without Gutenberg), you’ll need to add HTML into the text editor.

For example:

Some sample test here.

<div class="red-box">This text is in a red box.</div>

Some more text here.

Then you’d need some CSS:

.red-box {
    background-color: red;
    padding: 20px;
}

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mary]

Ah, ok great. Very helpful! Thank you.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts