How to Add the Block Element Hook Before the Main Content

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

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

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?

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...

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

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...

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>

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

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

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

Thanks, it worked...:)

You're welcome Ravi!