MMM-Moon module - how to resize?

[cricket]

I am using the MMM-Moon module and would like to increase the size that I am using in the bottom_left region. It appears there is no size option in the module itself. I have modded this for other modules/regions with success. I have gone into the custom.css file and added the following, but it is not working. Any help appreciated!

.region.bottom_left {
        width: 400px;
}

[sdetweil]

@cricket i do not know, but you should not try to resize the regions

see the second link in my signature below for a starter on how to use the developer window elements tab to discover and set css styles, to determine what should go in custom.css

did the module provide any default css settings?
edit: no

[cricket]

@sdetweil I will do that - to be clear my css is wrong?

[cricket]

@sdetweil
I will have a further look at that link and try to figure it out, but it may be over my head. Thanks again for your help.

[sdetweil]

@cricket well, it doesnt work, so yeh.

css is

selector_clause {
     styles to apply
}

there are three main selector clause types

starts w dot, means classname, class=“module”
.module

starts w pound sign, means id, id=“idstring”
#idstring

no prefix, means an html tag , p, h2, table, div, span, …

for class if there is NO space between the descriptors
like your .region.bottom_left
it means applies ONLY to elements with ALL classes specified on that same element at the same time

there are multiple operators that can help define exactly which element in a content tree you are targeting

the selector clause selects elements the styles between the {}
will be applied to. the selector clause ALWAYS selects ALL elements in the document ( web page) that match

i use this cheatsheet to help me remember
it used to be one page, but they have broken it out by family now

https://www.w3schools.com/cssref/css_selectors.php

many styles are NOT inherited by nested elements
(width, height)

[sdetweil]

@cricket understood. i am trying to teach you how to do it, so you dont have to wait on anyone! ( over and over)

there are 1200 modules that do it all differently.

i’m am just the moderator here. most of the module authors are not active, so we have to figure it out ourselves.

asking google

how do i change the size of an image on a web page with css,

should at least give you the style names you
might need to use (in dev window and custom.css)

[cricket]

@sdetweil
Many thanks for this, - you are a scholar and a gentleman. I will sort through this at some point soon.

[rkorell]

@cricket said in MMM-Moon module - how to resize?:

It appears there is no size option in the module itself. I

I’ve had the same issue not with size but with alignment and had resolved this within the middle-center region and have used:

.region.middle.center {
  width: 45%;
 
}

in custom.css.

This works for me to position the moon nicely above earth in my implementation.

Regards,
Ralf

[cricket]

@rkorell Thansk for this!