@sdetweil

.clock .time {
  font-size: 18rem;   /* try 12rem, you can adjust up/down */
}
.clock .date {
  font-size: 4rem;    /* optionally adjust the date size */
}

.region.bottom.right .container {
    flex-direction:row;
}

.currentWeatherModule {
  margin-right: 50px;
  font-size: 5rem;
}

The padding works but the font-size has no impact.

i tried going straight for

.weather

but that did not help.

@sdetweil

.region.bottom.right .container {
    flex-direction:row;
}

works but it crams it right. Making no space between current and forecast.

they are not on top of each other rather its run on sentance.

do i need to add more css to try and add some pad to the right of current weather ?

How do i use more of the bottom bar ?

Currently i have
moon LARGE SPACE calendar LARGE SPACE current weather (Stacked on) weather forecast

I want to use that space to the right of calendar so i can arrange the screen better. I do not want to stack.

let config = {
    address: "0.0.0.0",
    port: 8080,
    basePath: "/",
    ipWhitelist: [],
    useHttps: false,
    httpsPrivateKey: "",
    httpsCertificate: "",

    language: "en",
    locale: "en-US",
    timeFormat: 12,
    units: "imperial",

    modules: [
        // Clock
        {
            module: "clock",
            position: "top_right",
            config: {
                timeFormat: 12,
                timezone: "America/New_York",
                displayType: "digital",
                displaySeconds: false,
                showWeek: false,
                showSunTimes: true,
                showMoonTimes: true,
                lat: ,
                lon: 
            }
        },

        // Ecobee indoor conditions
        {
            module: "MMM-Ecobee",
            position: "top_left",
            header: "Indoor Conditions",
            config: {
                updateInterval: 300000,
                showIndoorHumidity: true,
                showOutdoorWeather: false
            }
        },

        // Dynamic Weather (OpenWeather visual background)
        {
            module: "MMM-DynamicWeather",
            position: "fullscreen_above",
            config: {
                api_key: "", // required
                lat: ,
                lon: ,
                units: "imperial",
                weatherInterval: 600000,
                updateInterval: 600000,
                animationSpeed: 2000,
                effectDuration: 60000,
                effectDelay: 30000,
                fadeDuration: 3000,
                realisticClouds: true,
                sequential: "weather"
                // sunImage: "sun_center"
            }
        },

        // Calendar
        {
            module: "calendar",
            position: "bottom_center",
            header: "Holidays",
            config: {
                maximumNumberOfDays: 90,
                wrapEvents: false,
                fade: false,
                maximumEntries: 5,
                calendars: [
                    {
                        symbol: "calendar",
                        url: "https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics"
                    }
                ]
            }
        },

        // Moon Phase
        {
            module: "MMM-MoonPhase",
            position: "bottom_left",
            config: {
                hemisphere: "N",
                resolution: "detailed",
                updateInterval: 12 * 60 * 60 * 1000
            }
        },

        // Current outdoor conditions (WeatherFlow)
        {
            module: "weather",
            position: "bottom_right",
            header: "Outdoor Conditions -",
            config: {
                weatherProvider: "weatherflow",
                apiBase: "",
                token: "",
                stationid: "",
                type: "current",
                units: "imperial",
                tempUnits: "imperial",
                windUnits: "mph",
                degreeLabel: true,
                showPrecipitationProbability: true,
                showUVIndex: true,
                showWindDirection: true,
                showWindDirectionAsArrow: true,
                showHumidity: true,
                showSun: false,

                showLightning: true,
                showFeelsLike: true,
                showCloudCover: true,
                showPrecipitationAmount: true,

                updateInterval: 10 * 60 * 1000
            }
        },

        // Forecast (WeatherFlow)
        {
            module: "weather",
            position: "bottom_right",
            config: {
                weatherProvider: "weatherflow",
                apiBase: "",
                token: "",
                stationid: "",
                type: "forecast",
                units: "imperial",
                tableClass: "medium",
                colored: true,
                fade: false
            }
        }
    ]
};

if (typeof module !== "undefined") {
    module.exports = config;
}

Nice work.

@sdetweil
then why is height doing nothing ?

.MMM-OpenWeatherForecast .module-content {
 width: 400px;
 height: 400px; 
}

@sdetweil To take the entire right side then do it with css?

position right or left do make the entire MMM-OpenWeatherForecast module disappear.

How do i make it fill the entire right side ?
I tried to use custom css and added height but no change.

what Wireless sensor do you folks use for outdoor weather to the mirror ?

@sdetweil the main weather module, default out of the box does not have precipitation % on today either!
I bet that is the issue.

@raspberrypi9 I consider myself new and have designed on a pi. I am using a standard small monitor but I have seen others with photos as you describe.