Question about layout position

Reply to Question about layout position on Sat, 25 Apr 2020 10:44:44 GMT

lavolp3 — Sat, 25 Apr 2020 10:44:44 GMT

@matelot20 Try putting it into fullscreen_below but in the config below the picture module.
Or you could put it into bottom_bar and adjust the margin_bottom accordingly

Reply to Question about layout position on Fri, 24 Apr 2020 23:10:59 GMT

sdetweil — Fri, 24 Apr 2020 23:10:59 GMT

you have to understand the design here.

this is a stack, on the bottom (furthest away) is fullscreen-below (below all others)
then there is the positions
and then there is fullscreen-above (above all others)…

fullscreen-below is for the background.
content goes here, sits on top of background
fullscreen-above is for a cover/screen-saver (hides all content and background)

see the ~/MagicMirror/index.html for the layout of these areas…
and then css/main.css for the classes that give it a 3 dimensional layout (zorder - is down, zorder + is above, normal i 0)

Reply to Question about layout position on Fri, 24 Apr 2020 23:01:23 GMT

matelot20 — Fri, 24 Apr 2020 23:01:23 GMT

@lavolp3 Thank you so much for the pointer. I wouldn’t even know that the fullscreen margin is -60px. I used the margin-top to 180px as suggested and it works. The result is exactly what I want. I include the picture to see the update. Notice how my 7 day forecast is at bottom right. How do I move to be below the picture area? I try with middle_center but it shows over the picture.

Thanks again.

Reply to Question about layout position on Fri, 24 Apr 2020 07:14:53 GMT

lavolp3 — Fri, 24 Apr 2020 07:14:53 GMT

@matelot20 said in Question about layout position:

Also, my US holiday calendar is showing with 2 lines (the date and United States). I see others didn’t have the word United States on their screen. How can I fix so that United States doesn’t show up.

this seems to be MMM-MyCalendar and not the calendar default module.
MMM-MyCalendar has a showLocationoption. Try setting this to false
https://github.com/jclarke0000/MMM-MyCalendar#configuration-options

Reply to Question about layout position on Fri, 24 Apr 2020 07:10:13 GMT

lavolp3 — Fri, 24 Apr 2020 07:10:13 GMT

@matelot20
The fullscreen-below section has a margin of -60px, so is extended 60px beyond the visible display. However a padding of 100px should show your picture 40px below the upper border of the screen.
I would consider trying the following:

.fullscreen_below {
  margin-top: 100px
}

or check your padding-top entry for errors. Do you know how to work with the browser dev tools (F12 on your computer)?
There in the elements tab you can check the css coder for every element. Very handy!