Latitude:xx.xxxx
Longitude:y.yyyy
Altitude:zzm
Longitude:y.yyyy
Altitude:zzm
Page updated: 26/08/2025 17:54:00
Use either: 'ows-grid col1' or 'ows-flex col1'
Tag
This uses 'w3-block', if 'w3-card' is used, it will have a shadow but still no padding.
For single column layouts it makes no difference if you use a flexbox or a grid - they are essentially the same.
Tag
Temperature
-- °C
Apparent
--
Feels like
--
Tag
This section uses a flexbox layout with 'w3-container's so padding is included, even for the title. To make the title background reach the edges use the class 'w3-stretch' in the title div.
This container uses a 'ows-theme1' colours.
Tag
Pressure
--
Highest Pressure
--
Rain rate
-- /hr
In a flexbox layout, orphan panels stretch to fill the available width. This panel has no title bar.
Tag
As above, this section uses a flexbox layout but with three columns. Only this card has been given a title but it has no background colour so the Gull will show through.
Card
Unlike the two colum layout this has been set to a fixed width - 'ows-fixed', so the orphan columns below stay 'column' width. They also center.
Click me:
This column has no border but as it is a card, it does have a shadow - 'ows-shadow1'. It has also been set to grow to twice its width - 'ows-growX2'.
The card before it has a button bar - ows-btnBar' with some text and a button. Not only the button stretches to fill the availabel space, this makes it easy to place text beside the button if required. Text can be put infront of, or after the text -
Tag
Card
Card
Card
As this is an orphan panel in a grid layout it always retains the panel size.
Button bars use flex boxes with all child buttons or div's set to wrap and expand into new rows as required.
In the above the buttons for 'This year', 'This month' and 'All time' have been made to grow bigger by adding the class: 'ows-stretch'.
