HELP! How to change the background color of a fixed grid page?

I can’t change the background color of my fixed grid page.
This is my yaml:

config:
  layoutType: fixed
  screenWidth: 881
  screenHeight: 661
  colNum: 14
  label: tablet screen size test 1
  style:
    background-color: "#ff3b30"
blocks: []
masonry: null
grid:
  - component: oh-grid-item
    config:
      x: 0
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: oh-label-card
          config: {}
  - component: oh-grid-item
    config:
      x: 0
      y: 8
      h: 2
      w: 2
    slots:
      default:
        - component: oh-label-card
          config: {}
  - component: oh-grid-item
    config:
      x: 12
      y: 0
      h: 2
      w: 2
    slots:
      default:
        - component: oh-label-card
          config: {}

In run mode (on pc, page editor) and on the tablet itself there is no visible background color, only the area around the screen is red but not on the screen:

With responsive layout I have no problem with background color only with fixed layout. What am I missing?
Thanx.

I believe what you are looking for is set by an f7 variable. Instead of

background-color: "#ff3b30"

try

--f7-page-bg-color: "#ff3b30"
1 Like

Thank you, this works.

Dear justin, do you know if there is a similar command for the text color of the fixed grid page?

If you mean can you theme all the text in each of the widgets in the page, then just setting color in the page config should work.