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