[Resolved] element shortcodes before main content issue

[Daniele]

Hi all,
I inserted this code

<div class="grid-33 before-content-left">
   [widget id="youtube-channel-8"]
</div>
<div class="grid-33 before-content-center">
    [widget id="youtube-channel-4"]
</div>
<div class="grid-33 before-content-right">
    [widget id="youtube-channel-9"]
</div>

in an element to be showed before the content section just in the homepage.

It works but the main content overlaps the hook (see http://www.80s.it) …how can i fix it?

thanks in advance,
Daniele

[David]

Hi there,

which hook did you use?
Try the before_main_content hook. It should position it above the content which is using masonry that is effecting this.

[Daniele]

Hi David,
I used that indeed!

here my screen: https://cdn1.imggmi.com/uploads/2019/3/10/6598128f6ca5fd4b9d94050b87336dd1-full.png

[David]

So the container is relatively positioned so give this CSS a shot:

@media (min-width: 1024px) {
    .separate-containers .site-main>.generate-columns-container {
        top: 220px;
    }
}

[Daniele]

I did it, it did it 😀
Cheers David!

[David]

You’re welcome = 🙂

[Daniele]

Hey David, I just noticed that space affect all the website’s pages, and i actually need that just on the homepage.
how can I exclude all pages but home?

tnx in advance

[Leo]

Try this instead:

@media (min-width: 1024px) {
    .home.separate-containers .site-main>.generate-columns-container {
        top: 220px;
    }
}

[Daniele]

Tnx Leo, now it works perfectly!

[Leo]

No problem 🙂

[Author]

Posts