[Resolved] Ads on the Side (Logical Placement) Ezoic

Hi there,

‘fire surround’ adverts like those are quite complex and are generally something set up by the advert provider, generally proxy injected using javascript.

If you want to, you could insert some Containers using a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Select the generate_after_header hook
Add this as the HTML:

<div class="advert-surround">
    <div class="advert-grid">
        <div class="advert-column left"> left advert here </div>
        <div class="spacer"><!-- ad spacer --></div>
        <div class="advert-column right"> right advert here </div>
    </div>
</div>

placing your HTML or adcodes in the appropriate containers.

Then we need some CSS:

.advert-surround {
    --c-width: 1200px;
    --ad-width: 200px;
    --max-width: calc(var(--c-width) + var(--ad-width) + var(--ad-width));
    position: relative;
    margin: auto;
    width: var(--max-width);
    max-width: 100vw;
}

.advert-grid {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
}

.advert-column {
    flex: 0 1 var(--ad-width);
    padding: 5px;
    background-color: #f00;
}

.advert-surround .spacer {
    flex: 1 0 var(--c-width);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}

@media(max-width: 1599px) {
    .advert-surround {
        display: none !important;
    }
}

To explain – there are two CSS variables at the start:

--c-width: 1200px;
--ad-width: 200px;

the --c-width needs to match the Container Width set in the Customizer.
the --ad-width sets how wide EACH advert column is.

then at the very end is the media query:

@media(max-width: 1599px)

this is the total width of the container and the to adverts minus one pixel – 1200 + 200 + 200 – 1 = 1599px
Adjust that inline with your CSS variables.
At sizes below that the adverts are removed.

Awesome – glad to be of help!