I have been trying to embed the following code into the Dawn theme.
<!-- Cal inline embed code begins -->
<div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>
<script type="text/javascript">
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; typeof namespace === "string" ? (cal.ns[namespace] = api) && p(api, ar) : p(cal, ar); return; } p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
Cal("init", {origin:"https://app.cal.com"});
Cal("inline", {
elementOrSelector:"#my-cal-inline",
calLink: "[redacted]"
});
Cal("ui", {"styles":{"branding":{"brandColor":"#000000"}},"hideEventTypeDetails":false});
</script>
<!-- Cal inline embed code ends -->
But somehow the embed either becomes too narrow (if using the above scaling of 100%) or it becomes aligned off-center (if using larger scaling). See here for the current result, using 150% scaling.
I’ve tried adding an align tag to the div to center or left-align, but that did not help. I am very inexperienced with styling, so there’s probably obvious stuff I am missing. Can anyone help?