Page content padding

Hey all,

I have a page that has no nav and toolbar and no manner of targeting is removing the 44px of padding that keeps getting added as page-content (which I’m not using on this page):

<template>
  <f7-page name="single" no-toolbar>		
		<a href="#" class="link back close-button">
    <img src="/close.svg" alt="Close">
  </a>
<div class="single-header">

Even targeting page-content with margin-top:0pc doesn’t work, so the only solution I’ve found to correct this is with page-current.no-toolbar { margin-top:-44px; } which can’t be right. Help!!!

If it is a top padding then i assume it is added by navbar. Check your DOM layout with browser inspector to see what is causing it

Thanks for the reply, @nolimits4web. It’s certainly unexpected as my page renders to

But I’m not using page-content in my component:

  <f7-page name="single" no-toolbar>
    <a href="#" class="link back close-button">
    <img src="img/close.svg" alt="Close">
  </a>
	<div class="single-header">
      <img class="single-header-image" :src="coverphoto" alt="">

If you don’t need page-content then it should be:

<f7-page :page-content="false">
1 Like

Thanks, @nolimits4web! It’s amazing how much you’ve considered within F7. Really nice work.

1 Like