how to make just 1 module bigger?

aarish

hey, I was using the default weather module and I changed it to only pull up 6 things from my calendar. I was able to successfully fo that but now I want the calendar module to be a lot bigger but keep the size of everything else the same. how would I be able to do that?

lavolp3

@aarish you can reference every module as a css element using its name as class.
in this case it is .calendar

in custom.css

.calendar {
  width: 500px;
  height: xxxpx;
}

But note that all other modules are automatically set with width: 100% so will adept their width…

aarish

@lavolp3 Thank you so much, this helps a lot!

aarish

Hello, I am using Bugsonet’s MMM-Weather module and wanted to make the data bigger. I wrote the same thing as above in custom.css besides changing .calendar to .MMM-Weather. I noticed that when I changed the width it made the module move left and right. I also noticed that changing the Height value did not effect anything. Any idea how to make it bigger?

pakal41

hello, I made it like this

/*

MMM-Weather custom
*/

.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .time,
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .day-name {
font-size: 22px !important;
}

.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .temperature,
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .temperature-container {
font-size: 26px !important;
}

.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .precipitation-container,
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .wind-container {
font-size: 22px !important;
}

.MMM-Weather .wrapper.table .forecast-container {
font-size: 22px !important;
}

.MMM-Weather .wrapper.table .forecast-container .forecast-item > span,
.MMM-Weather .wrapper.table .forecast-container .header-row > span {
font-size: 22px !important;
}

.MMM-Weather .wrapper.table .forecast-container .header-row > span {
font-size: 17px !important;
}

.MMM-Weather .wrapper.table .forecast-container .header-row .temperature-header {
font-size: 22px !important;
}

.MMM-Weather .current-conditions-wrapper .icon {
width: 180px;
height: 180px;
}
.MMM-Weather .inline-icon,
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .inline-icon {
width:45px;
height: 45px;

}
.MMM-Weather .extra-current-conditions-wrapper .feels-sun-container .inline-icon {
width: 26px;
height: 26px;
}
.MMM-Weather .wrapper.tiled .forecast-container .forecast-item .forecast-icon {
width: 80px;
height: 80px;
}
.MMM-Weather .wrapper.table .forecast-container .forecast-item .forecast-icon {
width: 50px;
height: 50px;

aarish

This is amazing, thank you so much!