matteoc

Thanks! I will test it on another computer. I also tried in safe mode. Wondering how my FF installation got so specifically corrupted.

I finally recruited the help of a brilliant front end developer and friend. He came up with the following CSS that solves a number of issues and inconsistencies with both Wabi and Gutenberg in general.

wp-site-blocks .wp-block-group { margin-top: 0 ; margin-bottom: 0;  padding-top: 15px; padding-bottom: 15px; }

.wp-block-column { margin-top: 0 ; margin-bottom: 0; padding-top: 10px; padding-bottom: 10px; }

ul {
  padding-left: 1rem;
}

//* ul > li + li {
  margin-top: 0.25rem;
} *//

.wp-block-post-content > .wp-block-group {
  padding: 2rem !important;
}

p {
  margin: 0 !important;
  
}

* + p {
  margin-top: 1rem !important;
}

header .wp-block-image {
  margin: 0;
  margin-top: -3px;
  margin-bottom: 3px;
} 

.wp-site-blocks > header + * {
  margin: 0;
}

.wp-block-columns:only-child {
  margin: 0;
}

.wp-block-column > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0;
  padding-bottom: 0;
}

.wp-block-column > * + * {
  margin-top: 1.5rem !important;
  // line-height: normal;
}

.wp-block-column > h4 + p {
  margin-top: 0.5rem !important;
}

@media screen and (max-width: 768px) {
  .wp-block-columns {
    display: grid;
    grid-gap: 1rem;
  }
}

.is-not-stacked-on-mobile {
  display: flex;
}

.is-stacked-on-mobile > * {
  margin: 0;
}

.is-stacked-on-mobile > * + * {
  margin-top: 1.5rem;
}

.wp-block-media-text {
  display: grid;
  grid-gap: 2rem;
}

.wp-block-media-text__media,
.wp-block-media-text__content {
  padding: 0 !important;
  margin: 0 !important;
}

h2, h3, h4 {
  margin: 0;
}

h2 + *, h3 + *, h4 + * {
  margin-top: 1.5rem !important;
}

.wp-block-post-content .wp-block-group p + h2, body .wp-block-post-content .wp-block-group p + h3 {
  margin-top: 1.5rem !important;
}

.preshero-learn-more {
  display: grid;
  grid-gap: 1rem;
}

.preshero-learn-more > * {
  margin: 0 !important;
}

.preshero-learn-more > * .wp-block-button {
  width: 100%;
}

.preshero-learn-more > * .wp-block-button a {
  width: 100%;
}

@media screen and (min-width: 769px) {
  .preshero-learn-more {
    grid-template-columns: repeat(4, 1fr);
  }

  .preshero-learn-more > * {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .preshero-learn-more > * .wp-block-buttons {
    margin-top: auto !important;
  }

  .preshero-learn-more > * .wp-block-buttons:before {
    content: " ";
    height: 0.5rem;
  }
}

.wp-container-9.wp-block-buttons {
  margin-top: auto !important;
}

I have reproduced the issue on a staging site: https://staging-phlandings.kinsta.cloud/presentation-public-speaking-coach/

It would be great if I knew how to control how much white space the header takes before the first block of the page. Right now both on mobile and on desktop I would greatly reduce that space.

Another quick screencapture https://www.dropbox.com/s/q3ef0pzoa4mpo1r/RPReplay_Final1649696008.MP4?dl=0

I’ve made some progress with alignments with simple CSS tweaks. Not happy with it, but it will have to do until I get some support here.

But color management is quite a mystery. See the video below:

https://www.dropbox.com/t/m6FO2iptoztIoLFU

Wonderful. Worked perfectly. I owe you a drink!

Thank you. The new version solves the problem.
Drinks are on me if you’re ever in Berlin 🙂