Resize card width for mobile browser

I would like cards width like these

But I get this

Can you help me?

I totally agree. Mobile does a reasonable job sizing but mobile specific UX would be great.

I solved it using Card-mod

style: |
  ha-card {
    margin: 0px 14px -5px 14px;
  }

Card example:

entities:
  - entity: light.hue_go_1
  - entity: light.hue_lightstrip_plus_1
  - entity: light.nanoleaf
  - entity: light.gateway_light_7811dcb78e9d
  - entity: switch.switchbot
show_header_toggle: false
style: |
  ha-card {
    margin: 0px 14px -5px 14px;
  }
type: entities