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

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

Home Forums Support How to Add the Block Element Hook Before the Main Content

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #2335508
    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…

    #2335510
    Fernando
    Customer Support

    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

    #2335566
    Ravi Saive

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

    #2335622
    Fernando
    Customer Support

    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?

    #2336600
    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…

    #2336665
    Fernando
    Customer Support

    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

    #2336670
    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…

    #2336671
    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>
    #2336700
    Fernando
    Customer Support

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

    #2336709
    Ravi Saive

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

    #2336727
    Fernando
    Customer Support

    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;
    }
    #2336729
    Ravi Saive

    Thanks, it worked…:)

    #2337466
    Fernando
    Customer Support

    You’re welcome Ravi!

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.