Problems with Divi Theme Builder in Wordpress

Question

Greeting everyone.

I'm trying to put my CSS code on a form using the Wordpress tool called Divi Builder. But the code i put in came out totally diffrent of what i programmed. I already tried almost everything and nothing works. I'll put my CSS code here if you guys could help i'll be totally grateful.

CSS code i made:

._form-content {
  display: flex;
  flex-direction: row;
  gap: 7px;
}
input {
  display: flex;
  width: 252px;
  height: 34px;
  border-radius: 8px;
  fill: #f9f9f9;
  border: 1px solid #b0b0b0;
}
input:focus {
  outline-color: #821313;
}
button {
  width: 286px;
  height: 34px;
  border-radius: 10px;
  background-color: #821313;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  transition: all 0.3 ease;
}
button:hover {
  background-color: #5c0d0d;
}

This is what should like

This is what it looks like

This is some errors i got

And again, any help i'll be totally grateful.

I tried re-writting the entire CSS code, tried to put inside the HTML code using the tag.

CSS without the HTML it is supposed to apply to, tells us rather little. Please provide a proper [mre], when you ask this type of question. — CBroe, Jul 20 '23 at 12:33
Also: [Please do not upload images of code/data/errors.](//meta.stackoverflow.com/q/285551) — CBroe, Jul 20 '23 at 12:33
_"This is some errors i got"_ - got them _from_ what? Is this the divi builder where you insert this, validating the CSS? If that is so outdated, that it doesn't know properties like `gap` yet - then there is probably a good chance, that it removes them, and outputs only the rest to the client ...? That's what I would check first of all. — CBroe, Jul 20 '23 at 12:35

score 0 · Answer 1 · answered Jul 20 '23 at 12:42

Divi has tons of internal CSS rules, most of them having very specific selectors consisting of many combined/nested classes/IDs/tags, and often even containing !important which makes it even harder to overwrite them. Most likely your css rules are overwritten by such complex Divi rules.

You have to use the browser tools on your elements to see which divi rules apply to them, and then create rules with selectors that have a higher specifity (google "css specifity" if you don't know what I am talking about). And if these divi rules contain !important, you have no other choice than also using !important in your rules to overwrite the divi rules.

Problems with Divi Theme Builder in Wordpress

1 Answers1