Unfortunately that css does not appear to change anything. Which is frustrating because I feel like I’m just getting the hang of css and understand that ‘!important’ should overide any other form of css.
Have you any suggestions as to why this might not be working?
I really don’t understand it fully but I get the concept..
Could this issue be that one form of css has a higher specificity?
So if I’m trying to override an ‘id’ which is prefixed with a # (as in the video) with a ‘class’ or . as a prefix it won’t work because a # has more points than a . ?
What confuses me even more about this specificity thing is even taking into account this points system for: 1) HTML elements 2) ID’s (#’s) 3) Classes (.’s), does inline css win over all the prefixes no matter what?
When I used the browser tool, it looks like the site theme is causing the field labels to be centered (see screenshot here).
If the custom CSS is not working, it could be due to how the custom CSS is added to your site.
When you get the chance, could you let me know how the custom CSS is added to your site?
In case it helps, here are our recommended options:
1) In your WordPress admin sidebar go to Appearance > Customize. Then in the Customizer sidebar that appears, go to Additional CSS to paste the code in.
2) Alternatively, you can install and activate the Simple Custom CSS plugin. With this plugin, you can paste custom CSS into its field on your site.
That’s interesting about the theme. I would ask is this the theme (as I understand this would be astra), or is the webpage builder (elementor) causing the issue? I only ask because I note in that screenshot that it says elementor.
Thank you for the suggestion of how to add css in. I use the appearance, customise then add css option usually. I have tried this and the css plugin you suggest in this case and unfortunately neither have had an effect.
It looks like you’re right that the styling is coming from the Elementor page builder.
A possible solution then could be to look at the style option of the widget where the form is embedded, and if there’s a text-align setting that has been set to the ‘center’ when on the tablet screen size.
Alternatively we can try to override that specific CSS with the following:
@media screen and (max-width: 767px) {
.elementor-8 .elementor-element.elementor-element-f47ccc1 .elementor-icon-box-wrapper {
text-align: left !important;
}
}
Unfortunately both of those attempts did not change anything. I did change the text alignment to left in the elementor builder option, which changed nothing. I also added that css which also changed nothing.
This is rather frustrating as just when I think I’m getting the hang of css, it doesn’t change any styling when I put it in custom css.
Could this be that Elementor does not allow any custom css? I only ask because when I’m editing with elementor, navigating to their custom css option states I need to purchase their products in order to be able to input custom css through their builder?
Whereas up to now I’ve been putting custom css through customize – additional css in wordpress.
So I was at the end of my tether investigating this and a bunch of other issues… It turns out for some reason (unknown to me still!), the webpage builder ‘elementor’ and the theme ‘astra’ were not playing ball with each other at all. No matter how much css I’d would put in the additional css box, no changes would happen.
I’ve bought a plugin called ‘CSS HERO’ which is amazing! Now when I put css in, it works!
I feel like I should not have had to purchase something just so the additional css option will work, however now I have I’m happy as it’s a great plugin!
