|
Eric Budovitch
|
May 8, 2014 at 1:26 pm
Wordpress: 3.8
Event Espresso E3
Not new instal
http://artfactory.cc/event-registration/?ee=5
Have to cop to using a Themeforest theme and I know that’s the issue
but I just opened the site in Firefox and realized that espresso’s “personal Info” and “Payment Overview/Payment option” sections during signup is misaligned.
I’ve been helped before with the custom CSS scripts to solve my theme issues and am looking for someone to pull a rabbit out of their hat for this one too however I’d like to know how to solve the problem on my own and would also appreciate being directed as to where I can instructed how to do so.
|
|
Tony
|
May 8, 2014 at 1:58 pm
Hi Eric,
We can direct you in how to start finding the cause for issues like these but often these not an exact science as themes do strange things.
The cause of this is the theme applying the rule float: left; to h3 tags. Floating elements keeps them within the flow of the a document but pushes them to the side (left/right)
So to find this open the page in firefox, press f12 to open the Developer tools, then right click on the effected element. http://take.ms/zrbFM
Then its basically inspecting the surrounding elemnts to find a cause, which can take a while (although you’ll start to learn the common causes) in this case I could see the registration form element wrapped around the h3 tag, which would normally happen with floats.
So clicking on the h3 tag within the inspector you’ll find the css rules that apply on the right, remove the float (untick it) and you’ll see the page is fixed – http://take.ms/dUu3L
So you have option of either editing the .css file that has that rule in, or you can apply your own styles to override the themes. We usually recommend that option as if the theme updates you then don’t lose the modification.
So to apply a rule just to that h3 we look at the parent elements and use their ID or class then apply to the element we want, so, we have a contain div with the ID event-reg-form-groups and we want to target the h3 within that and remove the float.
#event-reg-form-groups h3 {
float:none;
}
You can add that to your site using a plugin such as My Custom CSS
|
