Avoid Selectors help move the Grow widget above elements that may also be positioned in the same place on your screen.
What are Avoid Selectors?
Adding avoid selectors to your Grow Publisher Portal will move the Grow widget above any element that match the CSS selectors set in order to avoid any overlap.
They generally aren't needed if you don't have other widgets that are set for the alignment you have set for your Grow widget.
Common Avoid Selectors
We've compiled a list of common avoid selectors that come from popular ad networks or plugins below. Be sure to add them to your Avoid Selectors and save the changes for it to take effect:
- AdSense Adhesion Ad:
.adsbygoogle[data-anchor-status="displayed"][style*="bottom: 0px"] - Ezoic Adhesion Ad:
body > .ezoic-floating-bottom - AdThrive Adhesion Ad:
.adthrive-footer
How do I find Avoid Selectors?
Let's take this Back to Top button as an example. We want to set the Grow widget above that button instead of having them on either side of the screen.
Step 1: If you're using Google Chrome, you can find the Developer Tools by clicking Command + Option + I on a Mac or Control + Shift + I on Windows.
Once the sidebar opens, you'll want to take your mouse and click on the element that you want to find the selector of. It should create a hover affect that will give you more details.
Step 2: In the sidebar, right-click on the element, then go to Copy > Copy Selector.
Step 3: Head back to the Advanced Tab of the Grow Publisher Portal and click on + Add New under Avoid Selectors.
Step 4: Paste in the selector you copied then click Save Changes.
In this example, we'll also want to change the Alignment from Bottom Left back to Bottom Right and Save Changes. Once you refresh your page, you should see the Grow widget above the Back to Top button!
