How to remove margin from MainUI pages

[Oliver2 (Oliver)]

To all who tried to optimize space of oh-pages and wondered how to get rid of this space:

Add these styles to the config section of the page and to oh-block:

config:
  style:
    --f7-block-padding-horizontal: 0px
    --f7-navbar-height: 0
blocks:
  - component: oh-block
    config:
      stylesheet: |
        .block:first-child{
          margin-top:0;
        }

--f7-block-padding-horizontal: 0px reduces left and right margin
--f7-navbar-height: 0 is only required for iOS
stylesheet is required to inject css to overwrite app.css styles. in this case top margin

[jabra_the_hut (Oliver)]

I tried it on my system but it does not seem to work. On desktop screens I don’t care as it is barely visible. But on my iPhone it looks like this (cards of custom widget moved away from top and out of center):

compared to openHAB’s cards (centered):

My code looks like this:

config:
  label: Overview
  style:
    --f7-block-padding-horizontal: 0px
    --f7-navbar-height: 0
blocks:
  - component: oh-block
    config:
      stylesheet: |
        .block:first-child{
          margin-top:0;
        }
    slots:
      default:
        - component: oh-grid-row
          config: {}
          slots:
            default:
              - component: oh-grid-col
                config: {}
                slots:
                  default:
                    - component: widget:plant_cards
masonry: []
grid: null
canvas: null