calendar widget smaller size

[Pau]

Dear TECPRO,

The Calendar Widget (PRO) placed on my side column seems far too big and it misbehaves when in iPad view.

How and where can I edit the Calendar Widget (Events Calendar) to make it more light / small?

Would that be possible?

Many thanks in advance

[Pau]

I want to say I went to the forums and read some threads already, but none of the below codes on custom CSS seems to work:

.tribe-mini-calendar-event .list-info h2 {
font-size: 14px !important;
}

table.tribe-mini-calendar td,<br/>table.tribe-mini-calendar th {<br/> padding: 0.34em 0.6em;<br/>}

.tribe-mini-calendar-event .list-info h2,
.tribe-mini-calendar-event .list-info h2 a {
font-size: 14px !important;
}

.tribe-mini-calendar-wrapper {
width: 100%; /* Adjust to the size the fits */
}

[Geoff B.]

Good afternoon Pau and welcome back!

Thank you for reaching out to us.

We are sorry to hear about the calendar widget looking too big on your install.
I would love to help you with this topic.

I am unable to view your current website, but based on your system info, I believe that you are using a Divi child theme.
If that is the case, what is going on is that one of Divi’s CSS rules is overriding one of the calendar’s CSS rules.

You might want to try adding this:

.tribe-mini-calendar th {padding: 0px !important}

Let me know if that helps.

Have a great day!

Geoff B.

[Pau]

Hi Geoff, thanks

here is the site: http://79.170.44.126/ref-spainculturescience.co.uk/event/goya-visions-flesh-blood/

when applying this code the only thing that happens is the vertical padding just on the days goes to 0, the rest of the calendar stays the same (so, not applied now) see attached images

the main problem is the width, which is gets too big when seen in iPad

the aim is to have a mini calendar

I did read this post https://theeventscalendar.com/knowledgebase/styling-events-widgets/ but does not help with the size

or this, which seems a very similar problem but didnt work either: https://theeventscalendar.com/knowledgebase/calendar-widget-overflows-the-sidebar/

(is the mini-calendar same as Events Calendar widget on PRO version?)

As you can see, is proving difficult…

[Pau]

oops, forgot to attach images before

[Geoff B.]

Good evening Pau,

Thank you for writing back and for providing a link to your site.

I went ahead and tried to view the site on an iPad to get a better sense of what you are describing.

I believe you are referring to the portrait view.

If that is the case, here is what I would recommend:

Add @media argument in your CSS file to make a custom rule that would only apply to the iPad portrait view

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }

Add in a specific CSS rule to target your Mini-Calendar widget

#sidebar .tribe_mini_calendar_widget {
width: 62% !important;
}

Let me know if that helps.

Have a great day!

Geoff B.

 

[Pau]

Hi Geoff, many thanks for your committed effort in helping me, really appreciated.

I fear I’m doing something wrong, but I didn’t see any change

Did you mean to add in Divi custom CSS the following?

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */#sidebar .tribe_mini_calendar_widget {
width: 62% !important; }

I tried separately too, but nothing

and the calendar (apart from the iPad issue) still showing quite big. How can I edit the CSS of the calendar widget?

Sorry for this…

[Geoff B.]

Good afternoon Pau,

I’m sorry this is not working yet for you.

For the iPad specific issue, you have not confirmed yet if the issue is only in Portrait ? Could you tell me if that’s the case ?

As for your code, there are 2 things to tweak for the rules to kick in:

1. There was a missing closing bracket
2. Removing the comment

Try the following version:

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { #sidebar .tribe_mini_calendar_widget {
width: 62% !important; }}

How can I edit the CSS of the calendar widget?

If you take #sidebar .tribe_mini_calendar_widget declaration as a starting point, you should be able to tweak just about anything using the Google Chrome inspector (as explained here: https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/?hl=en)

Let me know if that helps.

Have a great day!

Geoff B.

[Pau]

Im not sure if that has worked (applied now) Maybe the problem is iPad in landscape mode.

BUT my main problem is the mini calendar padding on the sidebar. Can we fix that? See attached image

Many thanks for your dedicated help. Thanks!

[Geoff B.]

Hi Pau,

Thank you for writing back and for your great words.

These are great questions. The short answer is “it depends”.
Here is what I mean by that:

• By default (you can tweak that), your content area for a screen width of 981px and above is  79.125% of the available width with 5.5% of padding-right
• Still by default, your sidebar takes 20.875% with a left-padding of 30px;

So in short, it all comes down to how you decide to setup the display and paddings.

Here are a couple of ideas to try out:

• Removing the padding left of the sidebar (maybe for the whole site)

.et_right_sidebar #sidebar {
padding-left: 0px !important;
}

• Experimenting with the settings under Events -> Settings -> Display (the events template one)
• Changing the percentages allocated to the content area and to the sidebar
• Adding a CSS rule to limit Divi’s padding of tr elements

#content-area .tribe-mini-calendar td, #content-area .tribe-mini-calendar th {
padding: 0 !important;
}
Let me know how that goes.

Best regards,
Geoff B.

[Pau]

Hi Geoff, phew!

Finally

`#content-area .tribe-mini-calendar td, #content-area .tribe-mini-calendar th {
padding: 0 !important;
}`

has worked very well, thanks so much for your help and patience!

[Geoff B.]

Good afternoon Pau,

I’m super stoked that this worked for you.
Thank you for your great words and for sticking with us on this one

You are welcome back on our support forums any time 🙂

For now, I am going to close this thread.

Have a great week!

Geoff B.

[Author]

Posts