Hello,
on my test website the CSS custom code works the same on the frontend, as well as when I try editing the same page with the Elementor plugin.
For example, I tried changing the page’s title to red with the following CSS custom code:
h1.entry-title {
color: red;
}
and indeed the page’s title was red both on the live website, as well as when editing the page with Elementor.
Would you also try the same example? Just to see if the issue you’re experiencing is related to your specific custom CSS/JS code or not.
Are you using the free or the pro version of Elementor?
Hi,
I am using the free version of Elementor. Tried your example, still no visible change in the edit mode.
For better description, here are some screenshots and code that I am using:
My JS:
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', <code>${vh}px</code>);
if(window.innerWidth >= 767){
window.addEventListener('resize', () => {
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', <code>${vh}px</code>);
});
}
My CSS:
.top-section{
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
}
View in Elementor: https://tinyurl.com/2rvd7fr5
Live view: https://tinyurl.com/5ccbmdvr
Your JS code says that if the page’s width is larger as 767, then it should show the 100vh top section. Would you change the 767 value to 350 and check the page with Elementor?
When editing with Elementor there is a panel on the left side of the page with all the elements and settings. The panel takes about 300px from the page. It could be that on your monitor, when the Elementor panel is open, the page is narrower than 767, therefore the 100vh top section isn’t shown.
Clicking the “Hide Panel” icon on the panel will not help, as your code first checks the page’s width, then it adds the “resize” event listener. Firstly, clicking the “Hide Panel” icon doesn’t trigger a “resize” event. Secondly, the “resize” event listener is added only after checking for the page size.
Thanks for the tip. Tried it, no change.
Could you give me a link to your website so I can have a look?
