Support

October 22, 2015 at 5:34 am

Hi there,

This isn’t caused by the calendar itself, but you sites theme. Here is the code the theme is using:

.wpb_alert p:last-child, #content .wpb_alert p:last-child, .wpb_text_column p:last-child, .wpb_text_column *:last-child, #content .wpb_text_column p:last-child, #content .wpb_text_column *:last-child, .wpb_toggle_content p:last-child {
    margin-bottom: 0;
    width: 100%
}

If you take a look here: http://take.ms/tq6Jc

You can see the theme is applying styles to all ‘last-child’ elements using *:last-child

If I disable that within Chrome Dev Tools, you’ll notice the calendar spacing is correct: http://take.ms/o6eXH

That selector is very ‘loose’ and will likely target multiple elements you don’t actually want it to. To fix if for the Event Espresso calendar we can override it using something like:

#content #espresso_calendar *:last-child {
    width: auto;
}

However because the theme is using * selectors, you’ll notice the last child of the category legend and the last dropdown selector (above the calendar) are also 100% wide.

You can use:

#content #espresso_calendar *:last-child,
#content #espresso-category-legend *:last-child,
#content .ee-filter-form *:last-child {
    width: auto;
}

To target those at the same time.

I would recommend contacting the theme author and have them fix this, using * selectors in the way they are will cause these kinds of issues.

October 22, 2015 at 8:37 am

Your most welcome.

I’ll mark this thread resolved 🙂