Changing width of zettel using css?

[choener]

How do I change the displayed width of a zettel? It it around 768 px if I get the Haskell code right, and I would prefer each one to be much more wide. I have a head.html but can not figure out what to insert to make the main UI elements be more comfortably wide for me.

Thanks,
Christian

[srid]

You might be able to hack around by writing JS in head.html, and then getElementByID("zettel-container") and remove the "text" from its class "ui text container".

[srid]

https://fomantic-ui.com/elements/container.html#/definition

[choener]

Thanks,
this did work (and was easy enough) once you pointed me to it.
I'll leave the js below for others.

<script>
window.addEventListener("load", function(){
  document.getElementById("zettel-container").className = "ui container";
});
</script>

[srid]

Another way using pure CSS:

<style>
    #zettel-container {
        max-width: 800px !important;
    }
</style>

https://github.com/srid/www.srid.ca/blob/master/head.html