https://www.kimpact.de
pw: test123
Hi,
I wanted the top of my site have 100% viewport size, on each browser, on each device. So I added the code injection
<script>
document.addEventListener("DOMContentLoaded", function() {
// Ein Objekt, das die Zuordnung von section IDs und ihren gewünschten Höhen definiert
var sectionsHeightMap = {
"65eb1905e10e1874082f71ff": 1.0, // 100% der Viewport-Höhe
"65fc5d87d233ff10db80b843": 1.0 // 100% der Viewport-Höhe
// Fügen Sie weitere IDs hier hinzu, z.B. "sectionId": 0.75 für 75%
};
function adjustSectionHeights() {
// Durchlaufen aller Einträge im sectionsHeightMap Objekt
Object.entries(sectionsHeightMap).forEach(([sectionId, fractionOfViewport]) => {
var section = document.querySelector(`section[data-section-id="${sectionId}"]`);
if (!section) return;
var viewportHeight = (window.innerHeight * fractionOfViewport) + "px";
section.style.height = viewportHeight;
section.style.minHeight = viewportHeight;
section.style.maxHeight = viewportHeight;
});
}
adjustSectionHeights();
window.addEventListener('resize', adjustSectionHeights);
});
</script>
That works.
But: I wanted to add inside this section a text-block with a custom color background. This works also. But now, no matter what I do, under this text block, the section-background-color comes back. The block is at the very bottom. In editor, there is NO red visible - gap is zero (tight layout). It IS at the very bottom.
So can anybody help? Maybe with a better implementation of the viewport height, or a better way to avoid the overlap which happens?
