[Resolved] How to Add the Block Element Hook Before the Main Content

[Ravi Saive]

Hi Support,

I want to display a block element hook before the main content on the desktop only as shown in the image, but the created block is not showing properly…

[Fernando]

Hi Ravi,

Can you provide the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/?s=private+information

[Ravi Saive]

I have added the site details in the private info field…

[Fernando]

Where is it appearing if you set the hook to before_main_content? Can you apply that hook and I’ll see what’s occurring?

[Ravi Saive]

Hi Fernando,

I have added the element, but I want to show this element only to desktop users. Also, the element is not centered as per the main content area…

[Fernando]

I see.

Try adding this CSS:

.generate-columns-container {
    justify-content: center;
}

As for the Element not showing on other devices not desktop, you can add hide-on-* classes to your blocks: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Ravi Saive]

Hi,

Still it is not centered correctly, also how to hide it on mobile and tablet? I want to show this element only to desktop users…

[Ravi Saive]

Hi,

I added the following code to the element, now it is only showing to desktop users, but it is not centered…

<div class="hide-on-mobile hide-on-tablet">
<img alt="Tecmint Statistics" src="https://www.tecmint.com/wp-content/uploads/2022/09/tecmint-report.png" />
</div>

[Fernando]

Can you try disabling your caching/optimization plugins temporarily? We’ll have a closer look at the CSS in your site.

[Ravi Saive]

I have cleared the cache on the site after adding CSS…

[Fernando]

Try adding my-element to the class list of your block as well, then remove the previous CSS.

Add this instead:

.my-element {
    display:flex;
    justify-content:center;
    width:100%;
    padding-left:20px;
    margin-bottom: 10px;
}

[Ravi Saive]

Thanks, it worked…:)

[Fernando]

You’re welcome Ravi!

[Author]

Posts