Cannot reach the handle of the upper section

Elementor adds a body class “elementor-editor-active” when the editor is active so when I have a design requiring absolute positioned elements, negtive margins or anything else that might mess w/ the editor I’ll use custom css and prefix with:

body:not(.elementor-editor-active) .my-target-selector {
  /* nifty css here */
}

This way I get the look I need w/out sacrificing the edit capability.

Thanks Philip. I still wonder if there is a more easy solution. I’m not familiar with finding the right selector. And what is the meaning of: body:not(.elementor-editor-active) ?

The new WP 4.7 has a custom css option where you can add this or just add it to your theme’s style.css file. Simply give your upper section a class name and remove the negative margin (set it back to default). In this example I’ll use the class name upper-section.

Save and then view the page and choose customizer from the wp-admin bar. From there you can simply add:

body:not(.elementor-editor-active) .upper-section {
  margin-top: -5% !important;
}

The breakdown is that Elementor places it’s editor controls right inside the actual content we are editing so sometimes the look we are going for (styling) breaks that usability. We know that every page has a “body” tag and it only has a class of “elementor-editor-active” when viewing the page in the Elementor editor. This rule basically says to only apply this rule when the “body” tag does NOT have that class, thus don’t apply this style when Editing in Elementor.

The thing is. he won’t be able to add a class name to the upper section because it cannot be selected to do so ??

When I have run into this situation, I just add some bottom margin to the item above the section (in my case it was the header). I was then able to select the section and make the necessary adjustments.

Cheers!
Lyle

Yes indeed I didn’t think about that but I fear with the name of “upper” section it may not have anything above it. He’ll need to temporarily move another section above it or create one for that purpose.

If all else fails, he’ll have to use the browser inspector to temporarily adjust the margin back or just start that section over.

I was wondering if anyone else had run into this screwup.