-
Posts
-
The topic pretty much says it all. On pages on our website where there is a banner, the .avia-slideshow-inner can have a large height which causes a gap in the page. It seems to resolve itself after everything loads. Here is a link with the images for when the height is good and not so much:
https://ccp.flfe.net/wp-content/uploads/2021/01/height-good.jpg
https://ccp.flfe.net/wp-content/uploads/2021/01/height-bad.jpgI was thinking about hard-coding the css to try and fix the issue, but I thought against it as it probably would end up causing issues moving forward.
Oh yeah…other information was that issue always happened when logged in as admin, but only recently started happening for non-logged in users.
I’ve gotten past this by putting the height to 10% for screens over 400px:
@media only screen and (min-width: 400px) {
.avia-slideshow-inner {
height: 10% !important;
}It seems to be resolved for now, but if anybody could comment on how to make banners appear less squished and useless for mobile, that would be greatly appreciated!
Hi flfeadmin,
We’re glad to hear that :)
Can you try to use min-height instead of height? height will use the exact height specified while min-height will only guarantee that’s the minimum height used.Best regards,
NikkoHey Nikko,
Thanks for your suggestion. I have done so. Thank you for your prompt response and help!
Max
I’m good! Thank you.
I will note, though, for whatever reason the issue persisted on at least a couple pages when I added min-height to the CSS listed above. I am leaving it at height for now, as that seems to solve the issue.
- The topic ‘.avia-slideshow-inner height arbitrarily large on page load’ is closed to new replies.