Support

Home Forums Events Calendar Add-on Calendar not Responsive

Calendar not Responsive

Posted: July 23, 2013 at 2:14 am


Mending

July 23, 2013 at 2:14 am

Hi,

Your calendar is not responsive on iPhone: moderated making all buttons clutter up and some dissappear. This is not satisfactory.

Password: moderated

  • This topic was modified 10 years, 10 months ago by  Josh. Reason: removed details per request


Josh

  • Support Staff

July 23, 2013 at 6:35 am

Hi Mending,

This is correct. The buttons across the width of the table will fill and not wrap the width of their container because of the way they are markup up. If you want to make the header of the calendar responsive there are settings in Event Espresso>Calendar that allow you to remove buttons. If you’d prefer to display more buttons on wider screens and remove or even wrap the buttons to a new row this can be done by adding a few style rules using the @media query in your custom stylesheet.

The following example will remove the today, Month, agendaDay, and agendaWeek buttons for screens smaller than 599px:

@media all and (max-width: 599px) {
  .fc-button-month,
  .fc-button-today,
  .fc-button-agendaDay,
  .fc-button-agendaWeek {
    display: none;
  }
}


Mending

July 23, 2013 at 8:15 am

Thanks! That solved it – but why is this not standard CSS for the Calendar plugin?


Josh

  • Support Staff

July 23, 2013 at 8:27 am

This would cause issues for non-responsive themes. We can’t assume that all WordPress themes are using responsive media queries.


Mending

August 8, 2013 at 3:55 am

Hi again

The Calendar Widget is still not Responsive in vertical iPad view. Most of “Sunday” column is hidden.


Josh

  • Support Staff

August 8, 2013 at 8:43 am

Are you looking to display events on Sunday? If not, you could hide the column for the breakpoint at that width with something like:

.fc-last {
display:none;
}


Josh

  • Support Staff

August 8, 2013 at 9:45 am

One other thing you could try: You could set the breakpoint where the sidebar goes to full width to a slightly wider screen width size. Things can get a little cramped with two columns in portrait view on a smaller screen.


Mending

August 12, 2013 at 4:02 am

Hi,

I’m not quite sure what you want me to do?

Also could you please remove the link from this thread?


Josh

  • Support Staff

August 12, 2013 at 8:33 am

It’s really up to you how you’d like to resolve this. My preferences on how to fix this are not relevant.

You could try either option.

With option #2 where you increase the width for the breakpoint, it looks like its this line in foundation-responsive.css:

@media only screen and (max-width: 767px) {

You could try increasing that value by about 20-30 pixels.


Mending

August 12, 2013 at 3:16 pm

Hi Josh

Right, thanks – that seems to work.

The support post ‘Calendar not Responsive’ is closed to new replies.

Have a question about this support post? Create a new support post in our support forums and include a link to this existing support post so we can help you.

Event Espresso