Size of calendar in different views/devices

[hunchermuncher]

I’m just getting started so excuse me (I’m a Brit so I have to begin with an apology). My WP template is “Divi” by Elegant Themes. I’m not sure if I should be posting here or on Elegant Themes but here goes. I want to use the lovely mini calendar widget on my site but it seems to vary in size (the edge disappearing off the page) according to where I place it and which device I use to view it. I have the following issues:

1 On my 13″ Mac the widget is too wide for the sidebar (http://divi.dramaresource.com/category/drama-games)
2 However the widget width is fine when viewing the sidebar on the same page on an iPhone.
3 If I put the mini calendar widget in a module on a page (as in my home page http://divi.dramaresource.com) it is quite large but viewable on the Mac.
4 Now if I look at that page on my iPhone the widget is too wide to display.

[Brian]

Hi,

Thanks for using our plugin. I can help out here.

Sometimes the padding of the mini calendar is to large based on the theme’s css.

We have this guide:

https://theeventscalendar.com/mini-calendar-is-too-big-for-the-sidebar/

Does that help?

[hunchermuncher]

Hi Brian,
Thanks for the advice. I have tried adding the css but it made no difference, so maybe the mini calendar is just slightly too big for my template. Is there another way of changing the size of it?
Thanks,
David.

[Brian]

I took a look at your site and it maybe another css from the theme causing the issue.

See if this css will work:

#content-area .tribe_mini_calendar_widget table td {
padding: 0;
}

Add that css to your theme’s stylesheet or through a plugin such as Simple Custom CSS.

Let me know if that helps.

Thanks

[hunchermuncher]

Hi Brian,
That has completely solved the problem with the mini calendar in the sidebar – well done! It looks great in the browser and the iPhone. Could you take a look at the mini calendar where I have put it in a widget on the home page. There it is massive in the browser and doesn’t fit on the iPhone. If you are able to work you magic there I will be very impressed!
Thanks,
David.

[Brian]

Ok glad that helps, I have one more piece of coding for you and after that you may have to play with it some more to get it how you would like.

/* Mobile Devices
------------------------------------------------------------ */
@media screen and (max-width:640px) {
.entry-content .tribe_mini_calendar_widget tr th, .entry-content .tribe_mini_calendar_widget thead th,
.entry-content .tribe_mini_calendar_widget table tr td {
padding: 0;
}

}

This just targets the smaller screens so the widget still is big on Desktops etc. You may have to modify the padding around it to get it closer, but that css is in your theme.

Let me know how that works out for ya.

Thanks

[hunchermuncher]

Brian,
You are a total genius. I really appreciate your help as the mini calendar now also looks superb on the iPhone.
All the best,
David

[Brian]

Your Welcome!

Great, glad it helps, I am going to go ahead and close this ticket, but if you need help on this or something else please post a new ticket.

Thanks!

[Author]

Posts