How to remove margin from MainUI pages

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

2 Likes