diff --git a/src/_includes/assets/css/screen.css b/src/_includes/assets/css/screen.css index 6d29fb43f..495b4aa4c 100644 --- a/src/_includes/assets/css/screen.css +++ b/src/_includes/assets/css/screen.css @@ -2705,7 +2705,6 @@ a.banner:hover span { } .side-bar-ad-slot { - height: 600px; width: 300px; display: block; } @@ -2714,6 +2713,7 @@ a.banner:hover span { /* ---------------------------------------------------------- */ .ad-wrapper { + width: 100%; text-align: center; height: auto; } diff --git a/src/_includes/partials/ad.njk b/src/_includes/partials/ad.njk index 7fed6d0e4..0b9aa5995 100644 --- a/src/_includes/partials/ad.njk +++ b/src/_includes/partials/ad.njk @@ -3,7 +3,7 @@
{{ localizedAdText | upper }}
document.addEventListener('DOMContentLoaded', function() { var sidebar = document.querySelector('.sidebar'); + var postContent = document.querySelector('.post-content'); var isSideBarDisplayed = window.getComputedStyle(sidebar).display !== 'none'; + + // Cap the sidebar height so it can never render taller than the main content + function capSidebarHeight() { + if (!isSideBarDisplayed || !postContent) return; + sidebar.style.maxHeight = postContent.offsetHeight + 'px'; + sidebar.style.overflow = 'hidden'; + } + capSidebarHeight(); + window.addEventListener('load', capSidebarHeight); + function prepareAdSlot(elementId) { // Get the element by ID const targetElement = document.getElementById(elementId); @@ -60,9 +71,16 @@ document.addEventListener('DOMContentLoaded', function() { var sidebarHeight = sidebar.offsetHeight; var adTextSideBarHeight = 0; var sideBarAdContainert = 600 + 17; - + + // Since the sidebar contains content from multiple sources, + // account for its height so ads can fill leftover space + var existingContentHeight = 0; + for (var j = 0; j < sidebar.children.length; j++) { + existingContentHeight += sidebar.children[j].offsetHeight; + } + var styles = window.getComputedStyle(sidebar); - var avaiableSideAdSpace = sidebarHeight - adTextSideBarHeight - parseFloat(styles.paddingTop) - parseFloat(styles.paddingBottom); + var avaiableSideAdSpace = sidebarHeight - adTextSideBarHeight - existingContentHeight - parseFloat(styles.paddingTop) - parseFloat(styles.paddingBottom); var numSideElements = Math.floor(avaiableSideAdSpace / sideBarAdContainert); for (var i = 0; i < numSideElements; i++) { // container element