Center Webpage in card

Configuration Frontend
#1

Hi

I have a very simple webpage card that I would like to center horizontally within the card to remove the white space on the right hand side:

weather

Very basic card currently:

type: iframe
url: >-
  https://services.metservice.com/weather-widget/widget?params=white|medium|portrait|days-3|classic&loc=auckland&type=urban
aspect_ratio: 50%

I do have layout-card installed, but I haven’t had much luck with finding out anything around centering.
I know it’ll be straightforward…

On a related tangent, is scaling this down a little an option too?

Help much appreciated!

#2

If you only need to center the webpage in the card (not stretch) - then probably this may be fixed by card-mod. Go to Code Inspector in your browser and play with alignment. Cannot provide you a ready solution now, far away from a PC for a while.

#3

Thanks.
Through trial and error I’ve come up with this to better make use of the space:

with temp

type: custom:mod-card
style:
  hui-horizontal-stack-card$: |
    hui-iframe-card {
      width: 24%;
      flex: auto !important; 
    }
    gauge-card {
      flex: auto !important; 
    }
card:
  type: horizontal-stack
  cards:
    - type: iframe
      url: >-
        https://services.metservice.com/weather-widget/widget?params=white|medium|portrait|days-3|classic&loc=auckland&type=urban
      aspect_ratio: 58%
    - type: gauge
      entity: sensor.ble_temperature_outdoor
      severity:
        green: 0
        yellow: 25
        red: 29
      min: 10
      max: 35
      name: Outdoors

Probably still find a better use of the right-hand portion in time.
Am I doing this correctly?
Any suggestions?

#4

Seems to be good, check last example in that post.