
Hi guys, hope there is an easy fix with this that I have overlooked.
Basically I have a page with a view, when there are more than one record to display, the footer acts like a sticky footer and sits at the bottom of the page (so does the spacer), allowing me to scroll through the records without any graphical or UI glitches.
However, when I filter the view to display one record (or if the page only has one record), the footer stays at the bottom, but the spacer (red section divider) rides up the page, along with what appears to be another section of the body (grey area), shrinking the background wallpaper size - which is supposed to extend all the way down and touch the footer.
Here is an image of the issue:
My settings which relates to the footer are as follows:
Footer Web Template
(from CSS file)
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/*
**********************************************************************************************
sticky footer test
**********************************************************************************************
*/
html,
body {
height: 100%; /* Set to 100% of the container */
}
body > footer {
top: 100vh; /* pushes the footer outside the visible area */
position: sticky; /* pulls it back up and sticks it to the bottom edge */
}
.wrapper-body {
min-height: 100px; /* need to set a value to override the theme.css's calc value */
/* padding-bottom: 100px !important; */
}
/* reduce footer height */
footer .footer-bottom{
height: 50px !important;
}
/////////////
Edit: I have noticed that this appears to occur when using a larger external display monitor (eg 32inch), as opposed to my laptop.
On my laptop (16 iches) the page does not display any large gaps when only one entry / record is displayed on a page, whereas when I connect my latop to a larger display and load the same page, the image is rendered as shown in the above screenshot.
Is there a possibility that I have set the screen size (somewhere) to the screen size of my laptop and not dynamic for it to change depending on the displays screen size?