Move a module with custom.css

Egnos

Hello to all,
I’m a beginner and I can’t move to positions other than the standard settable ones in config.js.
For example “top_bar”, “bottom_bar”, “upper_third”, etc…

I tried to build a “custom.css” to move the “mmm-suncalc” module down (the module pictured below left), as shown in the following image:

Here is the custom.css that I made:

/*****************************************************
 * Magic Mirror                                      *
 * Custom CSS                                        *
 *                                                   *
 * By Michael Teeuw http://michaelteeuw.nl           *
 * MIT Licensed.                                     *
 *                                                   *
 * Add any custom CSS below.                         *
 * Changes to this files will be ignored by GIT. *
 *****************************************************/

header {
  text-transform: uppercase;
  font-size: 15px;
  font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
  font-weight: 400;
  border-bottom: 1px solid #666;
  line-height: 15px;
  padding-bottom: 5px;
  margin-bottom: 10px;
  color: #999;
}

body {
  margin: 60px;
  position: absolute;
  height: calc(100% - 120px);
  width: calc(100% - 120px);
  background: #000;
  color: #aaa;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
  font-size: 2em;
  line-height: 1.5em;
  -webkit-font-smoothing: antialiased;
 }

.mmm-suncalc, div#module_7_mmm-suncalc {
	position: absolute;
	top: 100px;
	left: 30px;
	bottom: 10px;
	padding-left: 10px;
}

But the form does not move!

Where am I wrong?
Can you help me?

Thanks so much.

BKeyport

You’re likely going to have to move the standard region to your liking. For example, I have set my left and right regions to a specific size to make things even (I’ve also centered everything)

/* Left Regions adjustment */
.region.left {
	text-align: center;
	min-width: 500px;
}

/* Right Regions - set minimum width */
.region.right {
	text-align: center;
	min-width: 500px;
}

broberg

.mmm-suncalc {
	position: absolute;
	top: 100px;
	left: 30px;
}

Egnos

Ok then I try!
Thanks guys for the support. :winking_face: