Unstable handling of CSS under WordPressElementor

admin管理员组

文章数量:1287191

I run a small website (www.binnenstadduurzaam.nl) using Elementor Pro and OceanWP, and have a parallel test site test.binnenstadduurzaam.nl, which is the same as the www site except when I am testing a new function or feature.

My sites have a fixed header, so when I jump to a menu-anchor I need a vertical offset. On the test site I implemented this by adding offst as class of all anchors, and the following CSS:

.offst {
  margin-top: -150px;
  padding-bottom: 150px;
  display: block;
}

It worked fine on the test site, so I implemented it on the www site and it didn't work -- no offset at all. I have a workaround, using the following HTML instead of the Anchor-Heading pair:

<h2>
   Bestelformulier
   <span style="
  margin-top: -150px;
  padding-bottom: 150px;
  display: block;"
id="formulier"> </span>
</h2>

and this works fine, but is of course a hack (and a maintenance nightmare). For certainty I exported the entire test site to the www site (after a backup of course) and the offset was still absent. I also tried adding !important to the CSS but that made no difference.

The only difference I can think of is that, on the www site, I installed and then de-installed assorted themes and plugins (before I had the idea of making a test domain). Possibly one of them has left traces which are breaking my CSS, but how do I find (and fix) whatever is going on?

[the site is in Dutch, but you can test by using the link "Doe Mee" (4th paragraph of homepage) or by links in the sitemap (access in footer)]

Edit 15nov: I was not clear about how the sites are set up; sorry! The test domain has class=offsanch for all anchors; the www domain has class=offst for all anchors except for the anchor id=formulier on page doemee, which has the inline style workaround mentioned above. I changed the class name because it might confuse a future webmaster: "what is a sanch, and why should it be off?"

I run a small website (www.binnenstadduurzaam.nl) using Elementor Pro and OceanWP, and have a parallel test site test.binnenstadduurzaam.nl, which is the same as the www site except when I am testing a new function or feature.

My sites have a fixed header, so when I jump to a menu-anchor I need a vertical offset. On the test site I implemented this by adding offst as class of all anchors, and the following CSS:

.offst {
  margin-top: -150px;
  padding-bottom: 150px;
  display: block;
}

It worked fine on the test site, so I implemented it on the www site and it didn't work -- no offset at all. I have a workaround, using the following HTML instead of the Anchor-Heading pair:

<h2>
   Bestelformulier
   <span style="
  margin-top: -150px;
  padding-bottom: 150px;
  display: block;"
id="formulier"> </span>
</h2>

and this works fine, but is of course a hack (and a maintenance nightmare). For certainty I exported the entire test site to the www site (after a backup of course) and the offset was still absent. I also tried adding !important to the CSS but that made no difference.

The only difference I can think of is that, on the www site, I installed and then de-installed assorted themes and plugins (before I had the idea of making a test domain). Possibly one of them has left traces which are breaking my CSS, but how do I find (and fix) whatever is going on?

[the site is in Dutch, but you can test by using the link "Doe Mee" (4th paragraph of homepage) or by links in the sitemap (access in footer)]

Edit 15nov: I was not clear about how the sites are set up; sorry! The test domain has class=offsanch for all anchors; the www domain has class=offst for all anchors except for the anchor id=formulier on page doemee, which has the inline style workaround mentioned above. I changed the class name because it might confuse a future webmaster: "what is a sanch, and why should it be off?"

• css

Share Improve this question edited Nov 15, 2021 at 13:20 NL_Derek asked Nov 11, 2021 at 22:54 NL_DerekNL_Derek 10133 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

this is just css, probably is just browser cache not clean. However your test page website at this date does not have a .offst class

and your main site has you said has a inline css and also an id of formulier.

Once this page doesnt have the .offst class, why dont you add an id #my_h2_formulier to that h2 on the test page, and then remove the span on the main with inline css and also add the id #my_h2_formulier to that same h2. Now just give the css to the #my_h2_formulier instead of the inexistent .offst class in both sites.

One more thing in your development website, you already have a div with an id formulier, and in the main website the div doesnt have that id, instead you have that id in a span. what can be also causing this issues is that in that page your html isnt the same in both websites. that is probably the biggest issue.

本文标签： Unstable handling of CSS under WordPressElementor