@leftybeauty:
Please note that this is a support forum. All new posts go into the unanswered topics queue and that’s where support volunteers go to pick questions to answer. When a question is marked resolved or deemed sufficiently dealt with, the support volunteer may unsubscribe from the topic to avoid receiving spam.
Also, given the diverse nature of WordPress websites (different themes, plugins, hosting, even content!), hardly do two websites with a similar problem end up having the same cause and the same solution.
So the best way to ensure your issue gets attention quickly is to always start a new topic to ask your own question!
But since you have my attention already…
I am having a similar issue here:
https://leftybeauty.com/blog/lefty-beauty-how-to-make-your-blowout-last/
I didn’t have a chance to look at @carguy2021’s website to know what’s really happening in the code, but in your case, it’s some custom CSS code you have on your site that’s limiting the display on smaller screens to a fixed height. (I can’t say though whether this CSS code is coming from a plugin, your theme, or something you manually entered.)
Below you’ll see some blocks of code I copied from the head section of the page you gave. You’ll see at various responsive breakpoints the selector .u-section-1 .u-post-details-1 which contains your the page’s actual content has a fixed height (eg height: 715px for the max-width: 1199px breakpoint).
This effectively limits the heights of the page to the values specified, hence the problem you’re having.
In fact, the page doesn’t just get cut at the bottom: if you open the site on a desktop computer, scroll down to the middle of the page, and resize the browser window to make it small like a mobile screen, you’ll see the page would be cut at both the top and bottom… and the footer will jump to the middle of the screen!
So how do you fix this?
The proper solution is to NOT define any heights for your page’s main content at all… and let the content automatically flow to fill whatever height it needs.
But if you MUST force a height (and I see absolutely no reason why you should), only use a minimum height (min-height) as the first block of code below uses for desktops (which is why you don’t have this problem on desktops).
.u-section-1 .u-post-details-1 {
min-height: 375px;
margin-top: 60px;
margin-bottom: -10px;
}
@media (max-width: 1199px) {
.u-section-1 .u-post-details-1 {
height: 715px;
}
.u-section-1 .u-image-1 {
margin-left: initial;
}
}
@media (max-width: 991px) {
.u-section-1 .u-sheet-1 {
min-height: 782px;
}
.u-section-1 .u-post-details-1 {
margin-bottom: 60px;
height: 662px;
}
.u-section-1 .u-image-1 {
height: 423px;
margin-left: initial;
}
}
@media (max-width: 767px) {
.u-section-1 .u-sheet-1 {
min-height: 722px;
}
.u-section-1 .u-post-details-1 {
height: 602px;
}
.u-section-1 .u-container-layout-1 {
padding-left: 10px;
padding-right: 10px;
}
.u-section-1 .u-image-1 {
height: 354px;
margin-top: 9px;
margin-left: initial;
}
}
@media (max-width: 575px) {
.u-section-1 .u-sheet-1 {
min-height: 656px;
}
.u-section-1 .u-post-details-1 {
height: 536px;
}
.u-section-1 .u-image-1 {
height: 275px;
margin-left: initial;
}
}
