How to place ad outside the main container?

Hi there,

the simplest method is to use the sidebar - which we can provide some CSS to keep your current layout and position the sidebar to the current empty space.... if thats an option then add the sidebar and ill provide the necessary CSS to do that.

Where would the advert go on smaller screens?

Hi, I just wanted to share my approach to this. I love Generatepress, I'm curious what proper developers like you think of this solution:

I've used Elements --> Block (select hook: generate_after_header)

Insert the banner image in a container and give it some margin if you want. I've used a 2 column grid for one banner on each side, one with text-aligned left and one with text-aligned right. This keeps them outside of the main container.

For responsiveness, I've used the following CSS to make it only show above 1900px view-width. Make sure you take your banner height into account: Because my banner is 150x600px, the css also moves the main content up 600px when the banner is shown, making the whole thing overlap nicely.

.banner {
display: none;
}

@media (min-width: 1900px) {
.banner {
display: block;
}
.site-content {
margin-top: -600px;
}
}

Hi there,

these kinds of requirement are very specific to the page layout.
if that method works for your layout then its all good :)

The only negative i see with it is you have to make sure the banner is always 600px in height.
If you're in control of that, then its all good.

I understand! To overcome that downside you could set a minimum height of 2000px (or even more) on the banner container and adjust the margin-top of .site-content accordingly. That would always provide enough room for any banner.

totally - it just needs adjusting to the various use cases.

thanks for sharing.