Alignmend of modules

codac

As I have the default calendar plugin, which needs a width of 475px, the upper modules currentweather, weatherforecast and MMM-DWD-WarnWeather are not really right-aligned. As you can see on the screenshot, I would like to keep the module on the right border of the frame. For the DWD-WarnWeather module, the module itself is placed correct, but the content is not right aligned.

What Do I need to do in order to fix that?

karsten13

@codac all these modules have the same position top_right?

For the warnings module you could use custom.css and overwrite the text-align: left; in the module css with text-align: right;

You can also play with css in the browser, e.g. see this thread.

codac

@karsten13 correct they are all top_right. Your suggestion worked:

.MMM-DWD-WarnWeather .status {
    font-family: "SFPro";
    text-align: right;
}

Your hint with playing with css in my browser helped to figure out that currentweather and weatherforecast behave like this because of a max-width of 325 that I already had set in the custom.css, as where the calendar has 475px.

MajorC

@codac I think you have to add

.MMM-DWD-WarnWeather .description {
    text-align: right;
}

MajorC

I have a similar problem.

I would like to have the yellow icon closer to the right in the module: ‘MMM-DWD-WarnWeather’.

And I would like to get rid of the space on the right in the module: “MMM-DWD-Pollen”.

codac

@majorc The question with the MMM-DWD-WarnWeather module I can answer. Was a bit tricky to find out, but what works for me is to set the follwing into the custom.css:

.MMM-DWD-WarnWeather .warning {
    float: right;
}

MajorC

@codac said in Alignmend of modules:

.MMM-DWD-WarnWeather .warning {
float: right;
}

Thanks, that is a good one!

sdetweil

@majorc u could try the same float-right for the pollen module

u may need to look in the developers window, elements tab to see the class used

ctrl-shift-i, select the elements tab, expand the nav tree in the left column to locate the module (top, top-right…)

set the module background to blue, to see the whole thing
and then add styles to the content

see how to use the elements tab info here
https://forum.magicmirror.builders/topic/14782/make-a-remove-header-space-or-overlap-two-modules/5

CarstenD

@sdetweil for MMM-DWD-Pollen you can change the following classes in CSS:

tab-center
pollen-low
pollen-low-medium
pollen-medium
pollen-mediumhigh
pollen-high
pollen-nodata

and just make

text-align: right

That should do the trick. Float will not work - it pushes everything to the right w/o spacing.

I am still thinking how one can save the space on the right side but I am not an CSS / HTML expert.

sdetweil

@carstend said in Alignmend of modules:

but I am not an CSS / HTML expert

me neither… i hate working on the UI