Phone/tablet layout

[Trzinka]

Hi!

I have a problem with the appearance of the floor plan card on the phone/tablet!

It looks like this on the computer:

It looks like this on the phone:
Horizontal view

Vertical view

It looks like this on the tablet:
Horizontal view

Vertical view

How could I solve the horizontal layout on the phone/tablet?

[OzGav]

https://experiencelovelace.github.io/ha-floorplan/docs/how-to-handle-size-and-expand-floorplan/

and also look at using different versions of the floorplan depending on screen width https://experiencelovelace.github.io/ha-floorplan/docs/usage/#image

[Trzinka]

So the solution is as follows:

I installed Full Kiosk Browser on the tablet and marked it to run in full screen mode!

More changes in

before in fp.yaml

views:
  - title: Floor plan
    path: floorplan
    theme: blue_night
    icon: mdi:floor-plan
    panel: true
    type: panel
    badges: []
    cards:
/*********************************************/
              - type: custom:floorplan-card
                panel: true
                full_height: true
                config:

after in fp.yaml

views:
  - title: Floor plan
    path: floorplan
    theme: blue_night
    icon: mdi:floor-plan
    panel: true
    badges: []
    cards:
/*********************************************/
              - type: custom:floorplan-card
                full_height: true
                config:

before in CSS

svg, svg * {
	cursor: auto !important;
	margin: 0px !important;
	max-height: 100vh !important;
	width: auto  !important;
	padding-top: 150px !important;
	padding-bottom: 150px !important;
	z-index: 0;
  }

after in CSS

svg, svg * {
	cursor: auto !important;
	margin: 0px !important;
	max-height: 100vh !important;
	width: auto  !important;
	padding-top: 100px !important;
	padding-bottom: 20px !important;
	z-index: 0;
  }