@svenpisa those things are called regions in MagicMirror
you can see their definitions in css/main.css (small sample)
.region {
position: absolute;
}
.region.fullscreen {
position: absolute;
inset: calc(-1 * var(--gap-body-top)) calc(-1 * var(--gap-body-right)) calc(-1 * var(--gap-body-bottom)) calc(-1 * var(--gap-body-left));
pointer-events: none;
}
.region.right {
right: 0;
text-align: right;
}
you can change them, by defining the same thing (the selector clause, everything before the {) in custom.css
in MM there is a stack of css definitions
custom.css on top
module css (multiple)
main.css
the versions of definitions above another overrides the prior
custom.css overrides all
module overrides main
main is the base..
in the developers window you can see where a definition comes from when u select and element, in the element tab
see this for a starter on developers window elements tab
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1707761145294
the doc, https://docs.magicmirror.builders/modules/configuration.html#position
shows the view of the default definitions…
note that adding to one means taking away from another…
there are lots of settings that affect each other… padding, margin, width , height,
what to do about content that exceeds the boundary, wrap, clip,
alignment
easy is a term I would not use for html/css
(I am not a visual designer, and this hurts my head…)
https://www.geeksforgeeks.org/design-a-web-page-using-html-and-css/
https://www.udacity.com/blog/2021/02/an-introduction-to-margins-and-padding-in-css.html