@SensorMaker, the bottom space is basically just the space that not filled by tiles, and I don’t think there is any CSS trick to “remove” it. However, you may want to try different tile sizes or number of columns, and the gutter sizes if you can find a find a better balance to reduce the extra space at the bottom, and maybe add some margin to the overall dashboard to move everything down a little bit?
EDIT: See @josh’s comment below for the corrected CSS class target.
I added .main-content {margin-top: 3em;} Didn’t change anything.
Then is tried: .tile:not(.spacer) {margin-top:2rem;}
Did the trick. Perfectly symmetrical top/bottom spaces.
That is, until the screen refreshed.
Then the attached is the result. Any ideas?
It was perfect, until the refresh
I would not target .main-content or .tile as they are used within tiles.
If you are trying to add some margin to the top of the dashboard to balance it out, you would be better off targeting the overall dashboard grid. You would need to adjust the value accordingly.
.grid.dashboard { margin-top:3rem; }
As always, any CSS snippets provided are not officially supported and you may have to adjust them if there are DOM changes with future releases.
Also, I think you had asked a question about removing the margin around the dashboard in another thread, so make sure your CSS snippets don’t conflict with each other.