https://forum.magicmirror.builders/topic/286/regions

top_bar and bottom_bar are light gray
top_left and bottom_left are red
top_center and bottom_center are blue
top_right and bottom_right are green
upper_third is yellow
middle_center is cyan
lower_third is magenta

All these regions will resize as needed.

@fiskaren custom.css

body {
  margin: 0px;
  height: 100%;
  width: 100%;
}

@broberg said in Layout problem:

Do what strawberry wrote, it will give you more space on the screen.

also

This should change the size of the fonts in the top two modules only

.currentweather {
font-size: 50%;
}

.clock {
font-size: 50%;
}

Awesome. Thank you both. It looks perfect now! :D

also

This should change the size of the fonts in the top two modules only

.currentweather {
font-size: 50%;
}

.clock {
font-size: 50%;
}

body {
  margin: 0px;
  height: 100%;
  width: 100%;
}

Here is a picture of how it looks right now:
http://imgur.com/a/t8JDj

Is it possible to force the modules some pixels out? Because if so I could put them closer to the edges and that would probably solve the problem.

The last solution could be to remove wind-speed. But it’s windy where I live and I would very much like to know the wind speed!

use top_left for clock and top_right for weather and then place the other modules in the upper/lower third regions and bottom regions.

The clock is at top_bar and right now the weather is at top_left. When both are placed at top_barthe clock are one row over the weather. Will that auto-adjust when changing the font?

And you probably have to change the font sizes to make it fit.
Add this in to your custom.css file

.xsmall {
  font-size: 15px;
  line-height: 20px;
}

.small {
  font-size: 20px;
  line-height: 25px;
}

.medium {
  font-size: 30px;
  line-height: 35px;
}

.large {
  font-size: 65px;
  line-height: 65px;
}

.xlarge {
  font-size: 75px;
  line-height: 75px;
  letter-spacing: -3px;
}

Then change the font-size until you have the look you want.