Able to add rows for entities in picture card?

Configuration Frontend
1

Hi all, I’m still a noob at HA with very limited tech background. I’ve added entities in my picture card (basically all the lights and blinds) but I have too many entities that when viewed in mobile or tablet, the last few lightbulbs get cut off and I can’t access.

Wondering if there is a way to make them into 2 rows, or squeeze them in so that I can see all the icons in my tablet

HA entity

2

I think that’s not possible, but you could use a picture-elements card: Picture Elements Card - Home Assistant. It allows positioning all such icons freely. It’s a bit of work to get the positions right, but should be possible to organize them in two rows.

3

Look at the Picture Glance card as example

image
image368×824 19.6 KB

4

hi, i tried using your code but it doesnt seem like it wants to have double row. can i know what im doing wrong?

This image is before.

image

This image is after

image

camera_view: auto
fit_mode: cover
type: picture-glance
title: MBR
entities:
  - entity: climate.mbr_ac
    show_state: true
    icon: mdi:air-conditioner
  - entity: script.close_mbr_curtain
    show_state: true
    icon: mdi:curtains-closed
  - entity: script.open_curtain
    show_state: true
    icon: mdi:curtains
  - entity: light.yeelink_sg_proxy_70040670016_2_1993170_yct01_s_2
    show_state: true
    icon: mdi:led-strip-variant
  - entity: light.yeelink_sg_proxy_70040670016_2_1993172_yct01_s_2
    show_state: true
    icon: mdi:file-cabinet
  - entity: fan.mbr_fan_light
    icon: mdi:fan
    show_state: true
  - entity: light.mbr_fan_light
    show_state: true
  - entity: binary_sensor.mbr_sensor_presence
    show_state: true
    icon: mdi:human-capacity-increase
  - entity: sensor.wi_fi_universal_remote_temperature
    show_state: true
image:
  media_content_id: media-source://image_upload/facc68a597d072a4668ac1767e94a599
  media_content_type: image/jpeg
  metadata:
    title: IMG_1849.jpeg
    thumbnail: /api/image/serve/facc68a597d072a4668ac1767e94a599/256x256
    media_class: image
    children_media_class: null
    navigateIds:
      - {}
      - media_content_type: app
        media_content_id: media-source://image_upload
card_mod:
      style: |
        .box div:nth-child(1) {
          display: grid !important;
          grid-template-columns: repeat(4,1fr);
        }
1 Like
5

If you mean this code, it still works in card-mod 4.x.
Cannot test your code now, sorry.

6

yes my card mod version is 4.1.0

7

Can you test with a bigger image?

8

what does that mean

9

Bigger = bigger size

10

I tried using your code above and it’s not working as I have shown I. My example above…

11

Have you tried to understand how it works?
To find out what are these “.box div:nth-child(1) {” for?
Have you checked another examples on the link which was provided above?
Can you see a difference between these examples? Why “suns” go to left, “toggleable” entities go to right?
Instead, you are repeating “does not work” in several topics, even create a new topic for that.
Hint - add more temperatures & lights into your card (or just duplicate same entries) to make it more “crowdy”, play between “nth-child(1)” & “nth-child(2)” and see what happens.
This is card-mod, in most cases a user cannot use it by just “copy/paste”, you really need to understand a basis at least.
P.S. No intentions to offend you )). Hope these hints will help you.