Skip to content

Instantly share code, notes, and snippets.

@webzunft
Created September 17, 2018 09:17
Show Gist options
  • Save webzunft/8672ffb64f10a6cedc6f539bd1e36afd to your computer and use it in GitHub Desktop.
Save webzunft/8672ffb64f10a6cedc6f539bd1e36afd to your computer and use it in GitHub Desktop.
Reserve ad space with a ratio
/** this code allows to reserve ad space with a ratio, e.g., when width is 100% and height needs to be adjusted dynamically
https://www.w3schools.com/howto/howto_css_aspect_ratio.asp
"top-banner-ads" is the class of the main container, in Advanced Ads derived from the placement name
**/
.top-banner-ads {
width: 100%;
height: auto;
padding-top: 12.4%; /* 728:90 ratio */
position: relative;
}
.top-banner-ads > div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment