The crux of this problem is what ever is responsible for resizing the height of each of those sections (That’s not Frag).
Frag is probably highlighting the issue, because the images are many in each section, and that takes load time.
When the images load, they require height which has not yet been allocated at page load time.
Something else seems to be resizing the height of each section at page load time, and on resize.
So when the images pop in after they load, the content below them is pushed down and clipped out of view. It’s impossible to say from my end what is responsible for controlling the height of those sections via JS, but what ever it is should implement its resizing function on images loaded as well as document ready.
1 Like
Yes, it is a mystery. Thanks for take a look see. I have a few ideas to test to see if I can make it work better, but at a point I’m better off not worrying about it. I may be the only person who views the page on an iPhone X.
@bruce
What happens when you add this to the javascript container:
var pageHeightPixels = document.body.scrollHeight;
var pHCSSVal = pageHeightPixels + 'px';
jQuery('.com_yabdab_stacks_filter_stack').css('height', pHCSSVal);
PS when I said in previous post that it looked ok on my iPhone X I was mistaken, I didn’t know what I was looking for. Your updated/simplified page demo’s the problem very well, thus aiding troubleshooting thus upping the odds of fixing it 
2 Likes
Thanks @indridcold. I put the code here and published the changes. I don’t see any difference.
Hi @bruce
We need that code to run after filter stack has executed. Try putting it in an eventlistener which triggers on page load. Replace what you have in the javascript container with this instead:
window.addEventListener("load", function() {
var pageHeightPixels = document.body.scrollHeight;
var pHCSSVal = pageHeightPixels + 'px';
jQuery('.com_yabdab_stacks_filter_stack').css('height', pHCSSVal);
}
);
2 Likes
@indridcold
I added the revised code to the test page. It works. Then I added it to my “real” page, and it does not work there. I’m hoping maybe another code tweak form you might fix that.
Test page is here:
https://www.kitchyglass.com/page-2/
Real page is here:
https://www.kitchyglass.com
I can’t seem to replicate the problem anymore on the real page, do you still see the issue?
The page is taking forever to download for me due to the remote images being ~ 4.5Mb. When the images eventually download the section heights seem to increase ok.
Would it be possible to optimise those images if only to enable more meaningful troubleshooting? 4.5Mb for an image of those dimensions is much too heavy.
I see the problem on my for sale page, but not on my test page. And that is how they are titled in the menu on my site. I will replace the images with smaller images tomorrow.
@indridcold I do still see the issue on the For Sale page. I replaced the images with smaller versions. Please look at the page again. Thanks.
Much better. I can see what I’m doing now
Take that javascript out and put this css into the css box and give it a republish and let’s see:
li.filter-item {
position: inherit !important;
height: auto !important;
}
.filter-content {
padding-bottom: 4em;
}
1 Like
That solves the clipped text problem, but now the Filer stack dividers are missing. This is from my RW project in preview mode:
Ok. Yes… that last CSS mangled the border. Try this:
li.filter-item {
position: inherit !important;
height: auto !important;
}
.filter-content {
padding-bottom: 4em;
margin-bottom: 4em;
border-bottom: 2px solid rgba(64, 133, 153, 1.00);
}
2 Likes
Thanks @indridcold. That works great in portrait mode, but the spacing is off in landscape mode. I felt the border padding was too much so I changed it to 1em and 1 em. I’m playing with the padding, and I believe I can find a happy medium.
I appreciate your time and help.
Yes, it is a compromise, I’m afraid. To prevent the text being clipped the CSS is overruling a position:absolute style which seems to be there to provide control over where things position inside the filter, so I’m not surprised that we are chasing it a little beyond that point.
Doobox nailed it in his post, the issue is essentially unreserved height being consumed and pulling other things out of shape, and in the case of the descriptive text causing it to be hidden.
By isolating the elements and providing some starter sizes you can experiment a little and see what works for you. Don’t forget that you can add the CSS inside a media query so that you can achieve different margins/paddings and so on for different screen (viewport) widths too.
2 Likes
I will review the settings and decided what is best to use. Thanks again for you help.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.