Symbol and temperature horizontally next to each other

  • Hello,

    I want the symbol and the temperature horizontally next to each other.

    I also want to reduce the height in the frontend (if used as a widget).

    Regards

    Torsten

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Torsten Bulk

    (@tobulk)

    Hello again,

    I’m a little further!

    Only the distance between the symbol and the temperature should be a fixed value.

    Now it’s responsively changing!

    My custom css code is:

    
.now .time_symbol.climacon {
    fill: #FFF;
    float: left;
    margin-top: -15px;
}
#wpc-weather.small .now .time_temperature {
    font-size: 35px;
}
#wpc-weather.small .now .time_symbol svg {
    float: left;
    width: 80px;
    height: 60px;
    margin-bottom: -40px;
}
    Thread Starter Torsten Bulk

    (@tobulk)

    Short supplement: and the temperature is not centered to the symbol

    Thread Starter Torsten Bulk

    (@tobulk)

    “Flex” is the solution for distance!

    
.now .time_symbol.climacon {
    fill: #FFF;
    float: left;
    margin-top: -15px;
}
#wpc-weather.small .now .time_temperature {
    font-size: 35px;
}
#wpc-weather.small .now .time_symbol svg {
    float: left;
    width: 80px;
    height: 60px;
    margin-bottom: -40px;
}
#wpc-weather .time_temperature {
    display: flex;
    margin-top: -20px;
}
    Plugin Author Benjamin Denis

    (@rainbowgeek)

    Thank you for your feeback.
    We really appreciate and a part of your code will probably be in a future release ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Symbol and temperature horizontally next to each other’ is closed to new replies.

Tags