Probleem:
Het viel me sinds de overstap naar Elementor op dat de rechter sidebar op mijn homepage veel langer was dan de content in het middengedeelte. Met als resultaat een groot wit vlak in het primaire content gedeelte wat lelijk is.
Uit onderzoek bleek dat de sidebar met de classes “aux-sidebar aux-sidebar-primary” een inline height waarde meekrijgt. Dit wordt niet door CSS ingesteld maar door de JS functie updateSidebarsHeight() in /phlox/js/scripts.js berekend.
Waarom dit met Javascript wordt gedaan geen idee. Binnen het Phlox thema worden er wel meer elementen met JS aangepast. Hierdoor zie je soms ook elementen verspringen.
Oplossing:
Helaas was het niet mogelijk om de Javascript code uit te schakelen of te overrulen zonder wijzigingen in het parent thema door te voeren. Dit moet je hoe dan ook zien te voorkomen omdat wijzigingen bij een volgende Phlox thema update ongedaan gemaakt zouden worden.
Ik heb daarom onderstaande CSS code toegevoegd aan het style.css bestand van mijn child thema:
.aux-sidebar.aux-sidebar-primary {
height: auto !important;
}
Oplossing getest op:
WordPress 5.4.2 met Phlox 2.5.19