Search
Clear search
Close search
Google apps
Main menu

Learn more about the new AdMob rewarded ads

Guide to custom CSS for native ads express

If you aren't used to editing CSS code directly, we suggest checking out the Udacity course, Intro to HTML and CSS.
 

When you customize a native express ad unit, you have the option to use the CSS editor to fine tune your design. You can use the editor to make changes directly to the CSS code of the template you've selected for your ad unit. The editor includes CSS code validation to help you avoid violating the native ad policies and guidelines and the AdMob policies and guidelines.


Best practices

Below are a few best practices to help you avoid the most common errors during validation.

Ad types

You can select styling for different ad types using ad type class selectors: .app-promo-ads (for app install), .content-ads (for content), .video-app-promo-ads (for video app install).

Code sample:

/* set title to blue for content ads and red for app promo ads*/
.app-promo-ads .title { color: red; }
.content-ads .title { color: blue; }

Right-to-left languages

You can style ads for right-to-left languages by using the .rtl class selector, which will automatically be applied to the whole ad container if the content of the ad unit is right-to-left (e.g., Hebrew or Arabic).

Code sample:

.button { float: right; }
.rtl .button { float: left; direction: rtl; }

Custom fonts

Don’t use custom fonts in native express ad units. The ad-rendered frame behaves like a WebView and can't support custom fonts.

Browser-specific CSS

Do not use browser-specific CSS. This includes vendor-specific identifiers (usually formatted as -vendor-specific identifier-). Ultimately, the ad-rendered frame behaves like a WebView. It uses the WebKit rendering engine to display ad content.

Disallowed CSS properties

Some major CSS properties are not allowed. If you’re not sure, click the Validate button to check if the property you're using is allowed. Disallowed properties:

  • !important declarations
  • overflow: scroll;
  • z-index
  • content
  • url function
  • transform
  • animation-* (including animation-name, animation-duration, etc.)

Responsiveness

The initial styling created by AdMob’s native ads express templates is responsive: the images will scale and size differently across device screen sizes and so will the text. We've already defined various thresholds of base font sizes using CSS media query selectors, and defined the size and appearance of most template elements using "em" units.

We recommend that you maintain this approach to keep your ad unit responsive. If you do want to make changes, we recommend using the calc function or media query selectors to adjust the ad unit’s responsiveness.

Calc CSS function

You can use the calc CSS function to make sure your elements are sized responsively. Calc doesn’t always work for all devices and browsers. Review the list of browsers (maintained by caniuse.com) for more information about which browsers support the calc CSS function.

Code sample:

/* We use calc to ensure the image gallery is always sized fully across the ad unit */
.image-gallery {
  /* 16px is the padding for the image gallery */
  /* Specify a fallback for width, as the calc function isn’t supported on earlier     versions of Android */
  width: 92%; 
  width: calc(100% - 16px); 
  /* 140px is the estimated height for the other elements in an ad unit of height 
  300px */
  height: 50%;
  height: calc(100% - 140px);
}
 

Media query selectors

You can also use media query selectors to style your ad unit responsively across device types and sizes.

Code sample:

.title { font-size: 18px; }
@media (min-width: 700px) {
  /* make the title larger on tablets or landscape mode */
  .title { font-size: 24px; }
}

Optional ad unit elements

Some native express ad unit elements are optional and hidden by default in AdMob's native express ad unit previews (e.g., the price, app store icon, app reviews, and button icon). If the element you want to use isn’t initially visible in the preview and you would like to show it, you can check if the element is available by "inspecting" the preview ad’s HTML.

  • Windows: Using the Chrome browser, right-click anywhere in the preview ad and select Inspect.
  • Mac: Using the Chrome browser, hold the control button and click anywhere in the preview ad. Then, select Inspect.

Now you can use the Chrome developer tools window to search the preview ad’s HTML code for the name of the element you want. Example: To find the title, search the HTML for ".title"

You can also check out our HTML code samples to find out more about some of the available optional ad unit elements.

Star ratings and button icons

App star ratings and button icons are .SVG files. Use the fill property to color them.

Preventing general errors

Below are a few of the more general ways to avoid errors during validation. Following these tips can prevent multiple types of errors from appearing and will help ensure your ads match the design in your app.

CSS structure

CSS statements can be accidentally overwritten, so make sure to keep your statements organized or add new statements toward the bottom of the CSS editor.

Responsiveness and position: absolute

Avoid using position: absolute unless you're confident that your elements will not overlap in any case. Setting position: absolute on multiple elements will stop your native express ad unit from being responsive across device sizes.

Multi-language support

If your app is available across multiple languages and you use the same native express ad unit for all languages, make sure to leave enough room for longer translations. Test your styling in the targeted languages to ensure the ad unit looks correct for all of your users. Translations and text assets across different languages may vary in width and size.

Implementing your ad unit

AdMob’s native ads express templates look the best at AdSize.FULL_WIDTH. To make your ad unit fully responsive, we recommend using this value when implementing the size of your ad unit. The height of your ad unit may or may not change across screen sizes, depending on the content of your app, and the context in which your native ad unit appears. Our template sizes and SDK currently do not support AdSize.AUTO_HEIGHT or AdSize.FLUID.

Note: The minimum and maximum width and height for each template is shown in the Size range field when you create or edit a native ad unit. Ads will not serve to ad units that fall outside the template’s minimum and maximum ranges for width and height.

We recommend the following for the different ad sizes available for AdMob native ads express:

Small templates: We recommend a size of full width x 100 dp on mobile phone devices in portrait mode, and a height of 150px - 200px for tablet or landscape mode.

Medium templates: We recommend a size of full width x 140 dp (or more). Similarly, scale up the height value for tablet or landscape mode.

Large templates: We recommend a size of full width x 310 dp (or more). Similarly, scale up the height value for tablet or landscape mode. Large templates feature a prominent 1.91:1 image or video. To take full advantage of a large ad unit’s space, we recommend using this formula to calculate the best height value to use:

Ad unit height = (Device width - margin space between ad unit and the app - margin space between the ad unit border and ad image) / 1.91 + 140 

Note: 140px is the approximate amount of vertical space taken up by the non-image elements of the template. This value may differ based on changes to font size and padding you’ve made, and it may be a higher value on wider screens or tablets. Feel free to adjust this constant as device width increases.

Debugging validation errors

Some errors found during validation are harder to locate in your CSS code and fix. Below are a few ways to explore your code and find these types of errors.

Debug tools

Use Chrome developer tools to debug the elements in the template previews. You can access Chrome developer tools by "inspecting" the preview ad’s HTML

  • Windows: Using the Chrome browser, right-click anywhere in the preview ad and select Inspect.
  • Mac: Using the Chrome browser, hold the control button and click anywhere in the preview ad. Then, select Inspect.

Specific validation errors

You can find more information in our guide to the most common native ads express errors.

Was this article helpful?
How can we improve it?
Sign in to AdMob

Sign in to see help for your AdMob account Sign in Don't have an AdMob account? Sign up today! Sign up for AdMob