Support

February 3, 2016 at 2:40 pm

Hi Greg,

You can inspect any element on a page using a free tool like Chrome Developer Tools (available with Google Chrome) or Firebug (available as a web browser extension).

This will show you the CSS that is handling the styling including the file and line number. Then you can add new styling to your website and there are a couple ways to add new CSS to a site. If your theme has a Custom CSS area built-in, then you can add it there. Otherwise, you could use a free plugin that adds an additional stylesheet to your WordPress site such as Simple Custom CSS or Reaktiv CSS Builder.

Try this CSS:

.span_event_time_label, .span_event_time_value { margin-left: 0 !important;}

You can then go back to your site and refresh the page to see the new changes.

—
Lorenzo

February 3, 2016 at 7:06 pm

Hi Greg,

The root cause of all of this misalignment is the bootstrap.css stylesheet that’s setting everything element with “span” in its class name to float right. Here’s what the inspector shows:

https://www.evernote.com/shard/s4/sh/9a18e70a-1598-4c1b-82d7-2de811fa69b5/84317ca0e5c25e8923b229d82b47f7d9

So when you use the bootstrap.css styles, you can keep an eye out for elements that get floated off to the right. When you find more, you work in more fixes like the one that Lorenzo showed you. In this case it’s the .span_event_date_label class that could also use a similar fix, but also in this case you’ll also throw in float: none;

February 3, 2016 at 8:19 pm

Hi Greg,

You’ll need to also add .span_event_date_value to your list, and any other elements you can find along the way that start with “span”. There may be more on this page and others, so you’ll need to keep an eye out for more.

February 4, 2016 at 11:42 am

And it won’t because you still have other span elements being floated. You can do something like this instead to cancel the floats for all of them:

[class*="span_event"]{
float:none;
}