CODEWITHSUNDEEP
htmlcsswordpresssafariaweber
rhand
rhand

Reputation: 1186

Override Margin of p wrapped AWeber Form to Display Title Well

In my site header I have an Aweber form that is loaded from AWeber with a script. Somehow now in Safari/Chrome the text of the form gets cut off:

aweber form

You can see that the "S" does not show well. As AWeber CSS is loaded inline and even uses !important: 

.bodyText p {
text-align: center !important;
margin-top: -8px !important;
}

it is more of a challenge overriding this. Even after cleaning up the custom CSS with the help of the validator. I am trying to override it and make sure the form does show the title well. So far no luck.

I have tried added some ids before the .bodyText p with and without important, but no joy so far. I could add the form without a script and as core html, but as this is inside a WordPress post I prefer to not do this and get the override done in custom.css of the child theme.

Full custom.css here (includes line below bodyText p and before AWeber data being ignored).

Upvotes: 0

Views: 97

Answers (1)

rhand
rhand

Reputation: 1186

Previous developer added a lot of inline CSS making it harder to debug. But with the help of a third party I managed to fix the issue. We added

    .bodyText {
margin-top: 1% !important;
}

to header.php to overrule other rules. We will move this CSS to style.css a.s.a.p. to make it cleaner and easier to debug the next time around. Due to !important rules in the important AWeber form we might not be able to live without the additional !important , but at least it will all work and be better organised.

Upvotes: 0

Related Questions