Removing layout shifts when client side detection is enabled

Hello,

when using client-side device detection and Insert method the block is not inserted untill the client-side code runs. Therefore, the layout will shift for wanted devices when the block is inserted.

You can define ad height and visibility properties using custom CSS and reserve ad space, for example:

height: 300px; display: block; visibility: visible;

This way the layout will not shift when the block is inserted.
But you will have blank space on unwanted devices – where teh block will not be inserted.

height: 300px; display: block; visibility: visible;

Should this code be inserted in the ad inserter block css or in the theme css where i want the block to be?

Thanks

Custom CSS for the block – will be used for all devices:
https://adinserter.pro/documentation/alignments-and-styles#custom-css

You can also place the code in the theme CSS.
If this code is only for desktop (wanted) devices then this would be the best approach.

Even when we add the css you provided in the css for the block, there is still layout shift when using client side insert.

Please see following test page for example: https://www.dreamjob.ma/emploi/aluminium-du-maroc-recrute-des-electromecaniciens-et-automaticiens/

Thanks.

Please enable remote debugging.

Done.

Please try this version:
https://downloads.www.ads-software.com/plugin/ad-inserter.zip

But if you would like to test pro version you’ll have to contact their support.

Can you please add this fix in the next update for ad inserter and ad inserter pro?

Thanks.

Also there is layout shifts when using [ADINSERTER VIEWPORT] shortcodes.

Does your fix adress layout shifts for this shortcode also?

Thanks.

This will work when defining block height via Mics/Display settings or custom CSS.

1. Yes.

2. Yes. But please note that for unwanted devices you’ll have blank space.