Gantry 5 Whitespace Issue
-
-
- Faelandaea
- Newbie
- Posts: 3
- Thanks: 0
-
Hello, everyone. I am ever so hoping someone can PLEASE help me out. So, I am running Wordpress 6.3.2. My only plugins are as follows:
- W3 Total Cache
- Really Simple SSL
- Gantry 5 Framework
- WP Mail SMTP
- WPForms Lite
I am currently running the Helium theme, but I have also tried the Hadron theme with the same issue as I am having here. For some odd reason, there is a HUGE whitespace below my slider on both mobile and desktop versions of the site. This happens regardless of Gantry theme I use. As you can see above, none of my plugins alter appearance, so they cannot be the issue. I have updated the latest in everything I have installed, and have checked and double checked ALL sliders and sections to no avail.
In the case of the Helium theme, the whitespace shows a huge chunk of the default space photo that came with the theme. If you visit my site at faelandaea.com and scroll down you'll see the huge empty space with the picture of the planet earth as a background.
So how the heck do I get rid of this? It seems small to you guys, I know, but to me this is a big deal and it is really breaking the entire look of my site. Am I wrong in trying to use Gantry 5 for a site? Should I ditch it and move back to regular Wordpress templates?
Any help or advice would be appreciated.
Here is an image showing the issue. The block with the planet earth needs to go. Everything else looks good.
This image is hidden for guests.
Please log in or register to see it.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21622
- Thanks: 3098
- messin' with stuff
-
Its set on the Styles Tab > Header > Background Image
and then your 2nd slide... elesis.png... there's some lazy load script running that's trying to covert that to an SVG which is causing the overall whitespace... whatever you got handling lazy loading try disabling that. - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Faelandaea
- Newbie
- Posts: 3
- Thanks: 0
-
Thank you so much for the reply, Sir. It is appreciated. I solved the background image info thanks to your information, but still have the whitespace issue.
Odd. I have never heard of "Lazy Loading", and I have no plugins or anything that would do such a thing. Wordpress by default has no settings for whatever that is. I am literally using Wordpress out of the box and this theme with whatever settings it has. Does Gantry 5 do this "lazy loading" thing? It absolutely has to be in Gantry 5 somewhere as Wordpress does not have this by default and again I have no plugin that does such a thing. Just SSL and forms for plugins (as listed in my original post).
EDIT: Did some searching and the only thing I can find on Google for anything with Lazy Load related to Gantry 5 is this:
github.com/gantry/gantry5/pull/2440
In this theme I am indeed using the owl Carousel as it comes with the theme. But I cannot tell from this article if it is "added" truly or just in testing of some sort and the replies in that thread are vague and confusing.
And I can find no setting in the Carousel that has anything to do with Lazy Load.
I also found this article: gantryprojects.com , though it is annoying to scroll through with all of the completely unecessary animations of the text scrolling, but it also mentions that the Gantry 5 Carousel has Lazy Loading built in by default. Scrolling way down on that page it is mentioned in the Carousel description. - Last Edit: 6 months 2 weeks ago by Faelandaea.
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21622
- Thanks: 3098
- messin' with stuff
-
Is this just a 1 slide carousel? Turn off the cloning... might resolve....
If you just need a background image and aren't wanting to add additional slides at a later point I'd recommend not using a slider like that... just load the background image via the Styles tab for a particular section and pad your content as needed to create your desired space
otherwise... I typed this up...
Can you turn off autoplay until this is resolved please. Is autoplay enabled?? It's like it's only enabled for the 2nd slide...
Maybe it's something in Owl Carousel then? I just don't recall ever seeing it...
If you inspect the carousel code that's rendering you'll see
Here's a normal <img> tag
<img class="lazy loaded" src="https://faelandaea.com/wp-content/themes/g5_helium/custom/images/2023/08/Elesis.png" data-src="https://faelandaea.com/wp-content/themes/g5_helium/custom/images/2023/08/Elesis.png" alt="Faelandaea Dravin's Humble Abode" data-was-processed="true">
and here's a "weird" one:
<img class="lazy" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://faelandaea.com/wp-content/themes/g5_helium/custom/images/2023/08/Elesis.png" alt="Faelandaea Dravin's Humble Abode">
That data:image/svg... I guess it's some kinda placeholder until the slide comes into view? It's rendering 1612x1612 which is what's causing that white space... but then... it's like your second slide is supposed to be that tall? I can't inspect it very well... every time I slide to that slide it just slides back immediately...
I wonder if it's to-do with the negative margin you have the slider... like maybe Owl can't calculate the right heights because of that... - SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Matt
- Preeminent Rocketeer
- Posts: 21622
- Thanks: 3098
- messin' with stuff
-
As an aside the Swiper Particle in Studius is probably the best slider out there for Gantry... a couple of the admin fields
aren't mapped through all the way
(post here if you run into issues), but it's still the best IMO
rockettheme.com/docs/wordpress/themes/st...s/particle_swiper.md
Since you have a club subscription you can download Studius and port that Particle to another theme.
docs.gantry.org/gantry5/tutorials/copying-particles - Last Edit: 6 months 2 weeks ago by Matt.
- SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT
-
-
-
- Faelandaea
- Newbie
- Posts: 3
- Thanks: 0
-
Thank you fo rthe replies. Sorry for my delayed response. As a truck driver it has been busy out here on the road so I have not yet had a chance to check replies here. I do plan to ad more to the carassel, not just the one image. I just wanted to fix the glitches first that I was having before I started going nuts with images. Once I get my next home-wime, which should be in a week or so, I can look at the code snippets you guys provided me to see if they work for me.
Thank you again and I WILL keep this thread applrised of my progress so others may benefit as well.
-
Time to create page: 0.040 seconds