Hello!

I've just woken up this morning to check this post and I can see the cover has been cut off.

It looks fine in Notion, and if you drag the image it also looks fine.

I haven't made any changes for a few days.

Any ideas what has changed to cut off the top image?

https://getdoingthings.com/fe5216fb3c7b430995bcc835171c5977

Hmm not entirely sure what could have caused that. You can always resize your cover photo (I'd give it a max of 300px), or use some CSS to resize them.

Something like:
.notion-header__cover {
  max-height: none !important;
  height: 360px !important;
}
Thanks. Added that. Bit of a weird one.
Hello!

Has anybody got any idea how I could fix this?

I'm getting a console error which I assume is related.

I'm injecting a custom nav into my site into snippets (this is the full content of my snippet injection)

Site here: https://getdoingthings.com/

<style>
.super-content p, .super-content ul, .super-content ol {
margin-bottom: 0.8em;
font-size: 18px;
line-height: 155%;
}

.super-content.max-width, .notion-header__content.max-width {
max-width: 950px !important;
}
.notion-bulleted-list .notion-page__icon {
display: none;
}
.notion-bulleted-list .notion-page>div {
padding: 0;
}
.notion-link.notion-page .notion-semantic-string {
font-weight: normal;
}
.notion-semantic-string .link {
opacity: 1 !important;
}
.notion-text__content ~ .notion-semantic-string {
margin-bottom: 0;
}

/* Nav */

.notion-navbar {
	display: none !important;
}

@media only screen and (max-width: 599px) {
	.nav-home {
		margin-bottom: 20px;
	}
}

@media only screen and (min-width: 600px) {
	.nav, .nav-links, .nav-link {
		display: flex;
	}
	
	.nav-links {
		justify-content: flex-end;
		width: 80%;
	}
	
	.nav-home {
		width: 20%;
	}
}

.nav {
	background: white;
	width: 100%;
	z-index: 99;
	border-bottom: 1px solid #ccc;
	margin-bottom: 20px;
}

.nav-links {
	backdrop-filter: blur(20px);
	color: #808c99 !important;
	align-items: center;
	z-index: 9999;
	height: 64px;
}

.nav-link {
  transition: all .3s ease-in-out;
  justify-content: center;
  align-items: center;
  padding: 0 20px 4px;
  font-size: 15px;
  height: 100%;
  color: #37352f;
}

.nav-link:hover {
  color: #808c99 !important;
}

.nav-home .nav-link {
	justify-content: flex-start !important;
}
</style>

<nav class="nav">
	<div class="nav-home">
		<a class="nav-link" href="/">[gdt]</a>
	</div>
	<div class="nav-links">
		  <a class="nav-link" href="/now">Now</a>
		  <a class="nav-link" href="/blog">Blog</a>
		  <a class="nav-link" href="/podcasts">Podcasts</a>
		  <a class="nav-link" href="/projects">Projects</a>
		  <a class="nav-link" href="/speaking">Speaking</a>
		  <a class="nav-link" href="/contact">Contact</a>
	</div>
</nav>	
Hey Craig! Not entirely sure what's causing that. Looking into it.
Can you confirm that you don't get this error with nothing in your snippet injection box? Want to check if it's the injected code that's causing the issue or not.
Yes, just removed everything—no error.

Put it back in—error.
 


I just figured it was because I'm injecting HTML into the head area. Is there a way I can inject it into the body?
Traf replied
  ·  1 reply