Zone Styling

There are two ways to zone styling:

Style 1

Directly applying style label to data-fuse div

Example:

<div data-fuse="xxx" style="max-height:xxpx; min-height:xxpx"></div>

Style 2

Applying id or class attributes and adding CSS properties to respective id or class.

Example:

• Use id to add CSS properties

  <div data-fuse="xxxx" id="headerboard1"></div>
  

  And apply CSS to headerboard1 on CSS file as :

  #headerboard1{
     max-height:xxpx;
     min-height:xxpx
  }
  

• Use class to add CSS properties

  <div data-fuse="xxxx" class="headerboard1"></div>
  

  And apply CSS to headerboard1 on CSS file as :

  .headerboard1{
     max-height:xxpx;
     min-height:xxpx
  }
  

Media queries can be leveraged on the CSS file to apply different styling to different breakpoints

/* Media query for screen widths less than 768px */
@media (max-width: 767px) {
  #headerboard1 {
    max-height: xxpx; /* Adjust the value as needed for smaller screens */
    min-height: xxpx; /* Adjust the value as needed for smaller screens */
  }
}

/* Media query for screen widths greater than or equal to 768px */
@media (min-width: 768px) {
  #headerboard1 {
    max-height: xxpx; /* Adjust the value as needed for larger screens */
    min-height: xxpx; /* Adjust the value as needed for larger screens */
  }
}

Tips: It is recommended that min-height is setup as per the max-height of the ad size requested on that ad unit.

• This is to ensure that there is no layout shift when the ad loads or refreshes.
• Please confirm with the onboarder if you are unsure what sizes are being mapped to the unit at certain breakpoints.

Hiding Ads

When you need to hide ads (for example, in certain responsive layouts or conditions), always use display: none instead of height: 0 or other dimension-based approaches.

/* Recommended way to hide ads */
@media (max-width: 600px) {
  #headerboard1 {
    display: none;
  }
}

Important: Using height: 0 or similar dimension properties to hide ads can lead to ads still being refreshed in the background, which wastes impressions and can affect reporting accuracy. The display: none property ensures that hidden ads do not refresh.