Downsize Calendar Block

Custom Coding
#1

Hi,

The Calendar Block is very well made, the only thing I’m struggling with is that it’s so big. I would like to downsize it. Any custom code that can do this?

#2

In the header code of the page settings. Play with 0.8. The best downsize should be 0.9, IMO.
You may need to play with the padding top and bottom in the style settings of the block (inside block settings).
Use transform-origin: top; if the downsize gives to much space on top of the block (it can happen)

<style>
#calendar1 {
  transform: scale(0.8);
  transform-origin: top;
}
</style>
#3

Thanks, I really need to pic up my basic coding skills :sweat_smile:

#4

Or use this one, your choice. I had some problem to adjust margin top AND bottom at the same time with transform-origin (which is normal).
With this code where I separate everyhting to be customized, it seems a bit better. You will still need to adjust padding top and bottom with the block style settings (best is to reduce to the maximum)

<style>
#calendar1 {
  transform: scale(0.8);
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
</style>
1 Like