Mini events calendar widget not responsive

[Dawn]

Im trying to use the mini calendar widget on a clients website.

However through testing on mobile i can see that it isn’t responsive.

Am i missing some CSS from somewhere?

[Jami]

Hey there Dawn!

I can help troubleshoot this with you. I’ve just gone through some testing for the mini calendar using a default  theme (Twenty Twelve) and wasn’t able to replicate any issues with it in mobile. Maybe you can be a little more specific about what you’re seeing on your end?

I look forward to hearing back from you.

Kind Regards,
Jami

[Dawn]

Thank you for replying

When i view the calendar plugin on a mobile it overflows on the screen, doesn’t shrink with the container. Jut to make myself clear its the bigger mini calendar, not the one in the sidebar etc.

if you check out the site you will see. http://stage.phenotype.net/mixingdigital/mixing/

Hope this helps

[Jami]

Thanks for clarifying that! I understand now where you’re seeing the overlap. It seems that the Table cannot get any smaller in this particular case so it’s going to overlap. You can try using CSS to customize the calendar table elements so that it fits into a mobile sized space though. For example, lowering the padding of the days and font size.

You can add custom CSS to your theme’s stylesheet or through a plugin such as Simple Custom CSS.

I hope that helps get things going in the right direction.

Kind Regards,
Jami

[Dawn]

Thank you for helping so far.

I can’t seem to find a way to make it responsive. Its a shame we pay this amount of money for a non responsive widget.

Is there anyway you can help me further? As i am not the most fluent in web design yet.

Thanks

[Rob]

Hi there Dawn! My apologies for the delayed reply here; Jami has unfortunately left us and we didn’t notice this thread was due a reply until now. I wanted to let you know this has been delegated elsewhere and another team member should be replying shortly. We appreciate your patience so far.

[Brook]

Howdy Dawn,

I just want to mention something first of all. That widget actually is responsive. Here is an example on our demo site, you can see it changes sizes from desktop to mobile: http://wpshindig.com/event-widgets/

But, the widget is obviously not responsive on your website. Unfortunately this is due to your chosen theme. The theme defines some general things about tables, one of them is it adds a lot of padding around each table column. This drastically increases the size for a 7 column table like a calendar. It also apparently does some other things to increase the size.

You will need to customize your theme to remove or modulate those CSS rules in your theme if you would like to have a skinnier 7 column table like a calendar widget. Right now your theme simply does not allow for tables like the calendar to be any smaller than they are, thus they are essentially not responsive. This might very well require a theme expert to write some custom code for you, and might take them a while to do. The other option of course is to try a different theme.

I wish there was more I could do. Does the above all make sense though? Do you have any more questions?

Cheers!

– Brook

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts