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.