Support

February 11, 2013 at 8:20 pm

Hi Gianna,
It sounds like your theme has removed the standard WordPress auto-format function. In which case, you could try wrapping the [ESPRESSO_EVENTS] shortcode in raw tags.

It will look like this:

[raw][ESPRESSO_EVENTS][/raw]

With the calendar, can you post a link to the calendar page so we can take a look?

February 11, 2013 at 9:05 pm

Hi Gianna,

It’s the calendar header that’s not so responsive.

Here’s a bit of some CSS media queries that you can add to a custom stylesheet via a child theme, the my custom CSS plugin or the Jetpack plugin’s custom CSS feature that will hide some of the buttons on small screens (and move a few things around in between other break points).

@media screen and (max-width: 768px) {
    .fc-header-center {
        position: absolute;
        margin: -35px auto 0;
    }
}

@media screen and (max-width: 600px) {
    .fc-header-center {
        position: relative;
        margin: 0 auto;
    }
}

@media screen and (max-width: 480px) {
    input[type=text] {
        max-width: 200px;
    }

    .fc-button-month {
        display: none;
    }

    .fc-button-agendaDay {
        display: none;
    }

    .fc-button-agendaWeek {
        display: none;
    }

    .fc-button-today {
        display: none;
    }

    .ui-corner-right {
        -webkit-border-bottom-left-radius: 6px;
        -khtml-border-bottom-left-radius: 6px;
        border-bottom-left-radius: 6px;
        -webkit-border-top-left-radius: 6px;
        -khtml-border-top-left-radius: 6px;
        border-top-left-radius: 6px;
    }
}