I have a small challenge regarding the issue of spacing, but I’ve been trying to solve it for a while now. There are spaces between page elements that I cannot account for. These spacing inconsistencies appear to happen mostly around Image/Video Sliders – I use Slider-Gallery and Slider-Flow – where unexpected “gaps” occur below the Image/Video Sliders that seem to get bigger further down a web page. The page background is partially visible – in this case a video background – where there should just be a plain white space. This unexpected behavior also causes the Image/Video Sliders to be partially not visible after publishing. Please see the screenshots. The url is https://helenalourdes.com
Thank you as always for helping troubleshoot. I’ve been stumped about spacing issues for a while now. Otherwise, I love the way the website looks and functions. Sitely/Sparkle has been a true gift to someone who doesn’t know code. Of course, I am always open to any suggestions to optimize my site.
Hi! That’s not a true Sitely in-app menu button; it’s just an image I created using the universal three bars with the “menu” label on top sitting inside a translucent circle with a red border. It’s all just one image created in Pages (Apple).
I changed the setting regarding “hide excess text” as suggested. Unfortunately, the layout issues still persist.
It would appear that most or all of the layout issues happen around the Image/Video Slider elements. However, the problems aren’t as visible in the Preview as they are on the Published page, in my case I mostly use Safari. In fact, when I switched to a different browser (Duck Duck Go), the problem displays differently, though it still remains a problem. Please see the attached screenshots. Also, please view https://helenalourdes.com/ and scroll down to the Image/Video Grid elements. It appears that the problem is exacerbated as you go lower on the page, which might give a hint as to the cause.
Gratefully,
Sino
p.s. - I do want to note that the mobile version does not appear to have these layout issues, just in case it matters.
It looks to me you have an image behind your sliders in a Fixed In Window setting? It seems strange though because you have a very busy slider sitting on top of a very busy image.
Could I also suggest your home page is way way way too long!
The “busy” image is the page background which is a fixed position video. And, you’re right, it’s not supposed to be visible under the “very busy” sliders. That is exactly the problem. It was a design feature I kept from the original template (“Filmmaker” template going back to the old Sparkle.) I also agree with you as to the length of the home page, although I’m not exactly sure what length it ought to be. (I’m working on that.) However, unless I’m mistaken, neither of these things are the cause of the layout issues. If they are, I would love to know for sure so I can correct accordingly. Thank you for the feedback!
I could suggest to remove the Fixed In Window images and videos (WideBox element) from behind your sliders. That way you won’t have the issue you are pointing out and your Image/Video Sliders will better stand out.
With the length of web page. There is no scientific set measurement, but the longer the page the more User fatigue and frustration creeps in. Online Users are for the most part “time-poor” so to get them to scroll and scroll and scroll will have them leave. For me I don’t usually go beyond 7 screen size scrolls for a home page, unless it is a full on sales page.
Also the search engines prefer website pages to have between 500-1800 words per page. The, search engine “crawlbots” spend a quick 3-5 seconds maximum per page to find out what it is about. Passed that they go look at the next page.
While the issue might have something to do with the Image/Video Slider being a full width element, that explanation falls short. If it were merely that, then other full-width elements would behave similarly, which they don’t. The problem areas are consistent even when windows are resized on a desktop.
