[Resolved] How do I adjust Hook element placement on my homepage

[Jude]

Hello,

I want to adjust the ad on my homepage to align as in the screenshot https://prnt.sc/pp29gp

‘1’ should align with other list post excerpt which means that it should not affect the side widget as it does now.
please see the screenshot to understand what I mean. Thank you.
https://prnt.sc/pp29gp

[David]

Hi there,

you can move it to the before_main_content hook. You can see all the main hooks here:

https://docs.generatepress.com/article/hooks-visual-guide/

[Jude]

That was really simple.
Thank you

[David]

Glad to be of help 🙂

[Jude]

Hello,
I discovered an issue when viewed on a mobile device.

The ad shows perfectly when view on the computer as can be see here https://prnt.sc/pplnyd

However, when view on a mobile device (https://prnt.sc/pplpaq) it overlaps with the arrows of the top post widget.

How can I stop the overlap on a mobile device? Thank you

[David]

The slider buttons are absolutely positioned below the container hence they overlay the next element. You can add some padding to slider container like so to create some space for them:

@media(max-width: 539px) {
    .recent-posts-hook {
        padding-bottom: 50px;
    }
}

[Jude]

Thank you

[Jude]

The ad now overlaps on when viewed on a computer. How do I contain it?
https://prnt.sc/ppompw
Thank you

Update:

I have rectified it. Thank you

[David]

Apart from increasing the content width or forcing the sidebar to stack on larger screens there isn’t anything we can do to change the adverts responsiveness. All its code all comes from the adserver which you cannot adjust remotely. Maybe worth checking if there is a better banner size ad for that space.

[Author]

Posts