Jump to content

phantom extra spacing that I can't remove on mobile

Recommended Posts

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.

 

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.