diff --git a/fr-calendar.css b/fr-calendar.css
index 1417f04..60d5fe4 100644
--- a/fr-calendar.css
+++ b/fr-calendar.css
@@ -83,7 +83,7 @@
 }
 
 .frcal__hour {
-	height: 30px;
+	height: calc(60 * var(--frcal-zoom, 1));
 	border-bottom: var(--color-base-40) 1px solid;
 	padding: 3px;
 }
diff --git a/main.js b/main.js
index 8d864db..2f3bf6d 100644
--- a/main.js
+++ b/main.js
@@ -291,6 +291,7 @@ class CalendarView extends ItemView
 		const container = this.containerEl.children[1];
 		container.empty();
 		this.eventsEls = {};
+		container.style = "--frcal-zoom: " + this.zoom + "px";
 
 		// mount view
 		this.mountView = container.createEl('div', { attr: { style: "height:0" } }).createEl("div", { cls: "frcal__mountView" });
@@ -562,7 +563,7 @@ class CalendarView extends ItemView
 			hourlinesEl.createEl("div", { cls: "frcal__hourline", attr: { style: "margin-top: 0px"}  })
 			for (let hour = 0; hour < 11; hour++)
 			{
-				hourlinesEl.createEl("div", { cls: "frcal__hourline", attr: { style: "margin-top: " + (120*this.zoom-1).toString() + "px"}  })
+				hourlinesEl.createEl("div", { cls: "frcal__hourline", attr: { style: "margin-top: calc(120 * var(--frcal-zoom, 0.5px) - 1px)"}  })
 			}
 			// add current time line
 			if (parseSingleDate(this.week + " " + DateFormat.days[(day+1) % 7] + " 12:00pm").diff(today, "minutes") == 0)
@@ -570,7 +571,7 @@ class CalendarView extends ItemView
 				let time = moment();
 				time = time.hour()*60 + time.minute();
 				this.timed[day].createEl("div", { cls: "frcal__hourlines" })
-						.createEl("div", { cls: "frcal__hourline frcal__now", attr: { style: "top: " + (time*this.zoom-1).toString() + "px"}  })
+						.createEl("div", { cls: "frcal__hourline frcal__now", attr: { style: "top: calc(" + time + " * var(--frcal-zoom, 0.5px) - 1px)"}  })
 			}
 		}
 
@@ -699,12 +700,12 @@ class CalendarView extends ItemView
 				'data-start': time[0].toString(),
 				'data-end': time[1].toString(),
 				'data-concurrent-clash': concurrentClash,
-				'style': ((allDay) ? '' : 'top:' + (time[0]*this.zoom).toString() + 'px')
+				'style': ((allDay) ? '' : 'top: calc(' + time[0] + ' * var(--frcal-zoom, 0.5px))')
 			},
 		});
 		let eventEl = el.createEl('span', {
 			attr: {
-				'style': ((allDay) ? '' : 'min-height:' + ((time[1] - time[0]) * this.zoom).toString() + 'px')
+				'style': ((allDay) ? '' : 'min-height: calc(' + (time[1] - time[0]) + ' * var(--frcal-zoom, 0.5px))')
 			}
 		});
 		eventEl.addEventListener('mousedown', (e) => {