phantom extra spacing that I can't remove on mobile

Site URL: https://www.kinrock.com/

I'm building a site that looks fine on desktop, but on mobile has all this extra vertical spacing that doesn't appear on the site builder but does on the live site.

See screenshot attached that shows the site builder for mobile layout on left, and actual live site on right.

In the Custom CSS panel you should add this code:

@media (max-width:767px) {
  section[data-section-id="632e50f9d2011344c3f06578"] .fluid-engine {
      grid-template-rows: unset;
  }
}

Hi @joseph81! I put in that code and that does remove the extra spacing, but it seems to limit the numbrer of grid rows and then the Redmill Advance logo image gets very small, and I can't add more rows to scale it back up.

Short solution would be this:

@media (max-width:767px) {
  section[data-section-id="632e50f9d2011344c3f06578"] .fluid-engine {
      grid-template-rows: unset;
  }
  section[data-section-id="632e50f9d2011344c3f06578"] .fluid-image-container {
  	  min-height: 120px;
  }
}

 I looked into it  more deeply and all that section is layed out on 52 rows. The first part with the text and the big space below has a 36 row placeholder. The text can just extend on that area of 36 rows. If the text needs only 26 rows(each 24 px) than the remaining 10 rows(10x24 = 240px) will still remain as an empty space. That is the bad part of css grid.

@media (max-width:767px) {
  section[data-section-id="632e50f9d2011344c3f06578"] .fluid-engine {
      grid-template-rows: repeat(12,minmax(24px, auto)) repeat(14,0) repeat(26, minmax(24px, auto))
  }
}

This solution would add only 12 rows for the text part then 14 rows that have 0 height and then the remaining 26 rows for the rest. But than again that does not fix the problem for all resolutions on mobile devices.

You could also just take out grid of this section but that requires a lot of work after to recreate spaces both vertical horizontal and a default height for the logo(otherwise it will be 0 height.