positioning groups two left and right

[lpt2007]

Hi,

I have two groups with two sub-buttons, and I wanna have group 1 on left side and group 2 on right side of bubble-card.

type: custom:bubble-card
card_type: cover
entity: cover.room_kitchen_window_blinds
show_icon: true
name: kuhinja
show_name: true
force_icon: false
main_buttons_position: default
icon_open: ios:window-shade-open
icon_close: ios:window-shade-closed
show_state: true
show_last_changed: true
styles: |-
  .bubble-sub-button-group {
      align-items: flex-start !important;
  }

  /* Hide original cover icons */
  .bubble-cover-button {
      display: none;
  }

  .bubble-container {
    width: 100%;
    display: flex;
  }

  .bubble-sub-button-1 {
    font-size: 14px;
    background: transparent;
  }

  .bubble-sub-button-2 {
    font-size: 14px;
    background: transparent;
  }

  .bubble-sub-button-3 {
      font-size: 20px;
  }

  .bubble-sub-button-4 {
      font-size: 20px;
  }

  .bubble-name {
    text-transform: uppercase;
    font-weight: 300;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    line-height: 30px !important;
    width: 78px !important;
    background: transparent;
    align-items: center;
    justify-content: center;
  }

  .bubble-state {
    top: 45px;
    font-weight: 300;
    font-size: 14px !important;
    letter-spacing: 1px !important;
    line-height: 30px !important;
    width: 78px !important;
    background: transparent;
    align-items: center;
    justify-content: center;
  }

  .bubble-name-container {
    background: transparent;
    position: relative;
    top: -20px;
    left: -95px;

    height: 140px !important;

    white-space: nowrap;
    pointer-events: none;
    
  }

  .bubble-icon-container ha-icon {
    --mdc-icon-size: 50px;
  }

  .bubble-icon-container {
    width: 80px;
    height: 80px;
    min-width: 80px;
    min-height: 80px;

    border-radius: 0px;
    background: transparent !important;
    
    /* 👉 DESNA OBROBA */
    border-right: 3px solid white;
    
    display: flex;
    align-items: center;
    justify-content: center;
  }
modules:
  - liquid_glass_light
  - subbutton_colors
liquid_glass_light:
  radius: 5
  showBorder: false
sub_button:
  main:
    - name: OKNA
      group:
        - name: LEVO
          content_layout: icon-left
          custom_height: 40
          scrolling_effect: false
          show_background: false
          show_name: true
          show_state: false
          entity: binary_sensor.room_kitchen_window_01
        - name: DESNO
          content_layout: icon-left
          custom_height: 40
          state_background: false
          show_background: false
          scrolling_effect: false
          show_name: true
          entity: binary_sensor.room_kitchen_window_02
          show_state: false
      buttons_layout: column
    - name: GOR - DOL
      buttons_layout: column
      group:
        - entity: cover.room_kitchen_window_blinds
          state_background: false
          show_background: false
          name: GOR
          show_name: true
          show_icon: false
          content_layout: icon-top
          width: 80
          custom_height: 40
        - entity: cover.room_kitchen_window_blinds
          state_background: false
          show_background: false
          name: DOL
          show_name: true
          show_icon: false
          content_layout: icon-top
          width: 80
          custom_height: 40
  bottom: []
rows: 1.813
subbutton_colors:
  subbutton3:
    color: red
    condition:
      - condition: state
        entity_id: cover.room_kitchen_window_blinds
        state:
          - closed
  subbutton4:
    color: red
    condition:
      - condition: state
        entity_id: cover.room_kitchen_window_blinds
        state:
          - open

[lpt2007]

I try like this, but not working on all my tablets, because they have different screen resolutions.

.bubble-sub-button-group .bubble-sub-button-1,
.bubble-sub-button-group .bubble-sub-button-2 {
  right: 830px !important;
}

I would like to have sub buttons like that on all my tablets.

[Clooos]

Hi! Have you tried to set the first group layout to "Left" and the second one to "Right"? You shouldn’t have to use custom styles for that.

[lpt2007]

Hi! Have you tried to set the first group layout to "Left" and the second one to "Right"? You shouldn’t have to use custom styles for that.

I didn't find this in settings. Can you explain more, or show me example?