[Resolved] Add Padding to Elements using the before_main_content hook

[Scott M]

i was asked to start a new support thread on this topic.

i used elements to add a paragraph before the posts start on a dedicated blog page. the hook i’m using is before_main_content. The location of the paragraph is exactly where i want it, but there is no padding around that paragraph like there would be if i had created the page using the page builder. i have considered re-creating the page with the page builder and standard sections, but i’m not as happy with the formatting of the blog section.

anyway, the padding issue looks ok on the desktop (not ideal though), but the text on this intro paragraph runs up against the edge of a mobile display. id really just like that paragraph to have the same padding as a regular page section. you can see what i’m talking about on the news page of my site, which was submitted with this request.

i’m a novice with css, and tried using simple css to add code recommended in different threads, but with no success. i appreciate the help!

[Leo]

Hi there,

Try wrapping the content in the hook with a <div> like this:

<div class="my-content">
    Your existing content
</div>

Then add this CSS:

.my-content {
    padding: 10px 20px 0px 20px;
}

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

Let me know if this helps 🙂

[Scott M]

magical. it’s resolved. thanks!

[Leo]

No problem 🙂

[Author]

Posts