Support

March 13, 2014 at 4:57 am

Hi G,

I have taken a look at the site and it is the sites theme that is breaking the layout.

Using Chrome Dev tools I removed these rules:

http://take.ms/Zjozh
All from the same file within the theme (customizr/inc/css/green.css)
There’s also more after these

The result is this layout:
http://take.ms/j26Sp

There are multiple ways to work around this, however it is likely you will run into these kinds of issues in multiple areas as the theme is using very ‘loose’ selectors (basically they select ANY span/label on the site and apply multiple rules to those) as this is an issue with theme, I would recommend contacting the author for a recommended solution.

March 13, 2014 at 4:29 pm

Hi Gijsbert,

I had a re-think about this and you can override the themes rules for those specific issues, however as mentioned the theme uses very loose selectors which may result in many of these situations.

I’ve spent a little time overriding the CSS causing your issues, if you install a plugin such My Custom CSS and then within there add this CSS:

#event_espresso_registration_form [class*="span"] {
display: inline-block;
width: 150px;
margin: 0;
float: none;
min-height: 0;
}

#event_espresso_registration_form .span_event_date_value {
width: auto;
}

That should bring the layout back to normal (http://take.ms/lTovo) if not just let me know so I can re-check and add any extra styling you may require.