What are Sulvo Fluid ad units?

Fluid ad units

An ad unit that fits into its space automatically. For Advanced Accounts, our Fluid ad unit allows you to control the maximum size of the ads on your page, in line with how you control the layout of the rest of your page across devices.  This allows you to set up ads that work with your responsive site.

To make it easy, we provide six options for you to configure how your fluid ad unit behaves:

• Fluid all shapes

• Fluid skyscraper and square

• Fluid leaderboard and square

• Fluid leaderboard

• Fluid square

• Fluid skyscraper

Key features:

• Automatic sizing based on the space available. Our responsive ad code automatically adapts the ad unit size to your page layout. We calculate the required size dynamically based on the available space and the size of the user's display, then find the highest paying ad unit size to fit within that space.

Considerations:

• If the parent container has no width set. If your responsive ad code is within a parent container that doesn’t have an explicit width set, for example, within a floating element, then our ad code won’t be able to calculate the required size for the fluid ad unit. In this case, you’ll need to modify your code and use CSS media queries to set the size of the parent container.   The available width for fluid ads must be at least 50 pixels.

• After the highest paying unit size is determined the fluid ad unit will resize the HTML parent container (e.g., <div>) that they're within. This allows them to automatically adapt to all the different ad sizes on publishers' pages.

   This may change the page layout but ensures the best ad performance. If you do not want any div height changes we recommend using a fixed-size unit for that placement. 

  For fluid ad units to work properly, they must not be placed inside a container with a fixed or limited height. If you're experiencing issues with your fluid ad units appearing taller on some devices or browsers, it might be because they're within a container with a fixed or limited height.

• When a fluid ad is loaded on mobile it may take up the full width of the screen (regardless of the containing div size itself). If you are using a fluid square unit and serve this unit on pages optimized for mobile devices then we recommend setting the container div "min-height" to always match the width of the device screen. You can achieve this by using this code:

  1. Place the following code in the head tag of your website's HTML:

     <script>
     !function(){function n(){var n=document.getElementsByClassName("rr-container"),e=window.innerWidth>0?window.innerWidth:screen.width;if(!(e>500||window.innerHeight<window.innerWidth))for(var t=0,i=n.length;t<i;t++)n[t].style.minHeight=e+"px"}-1<["interactive","complete"].indexOf(document.readyState)?n():window.document.addEventListener("DOMContentLoaded",n)}();
     </script>

  2. Add the class "rr-container" to the outermost parent div of each fluid square tag (for example):
     

     <div class="rr-container">
       <div data-ad="example.com_fluid_square" data-devices="m:1,t:1,d:1" class="demand-supply"></div>
     </div>​

What's next?

Please visit the Inventory page and create a new ad tag.  Once the ad tag is created, please follow the steps to publish the ad tag on your website.