Sense 15.3.0 – Custom Liquid section too tall on iPhone Safari (extra background below content). How to make height hug content?

Store Design
, , , ,
1

Dear Community, Im using Theme/Version: Sense 15.3.0
Context: I added a Custom Liquid section with a blue background. On desktop it hugs the content perfectly. On mobile (iPhone Safari), the section becomes much taller than the content, leaving a long blue area after the last paragraph. Android/Chrome I can’t test bc I do not have such a mobile device.

What I’m seeing:

  • Desktop :white_check_mark: correct height.

  • iPhone Safari :cross_mark: large extra space below the content (same section)

see store url preview:

What I’ve tried (no luck so far):

  1. Force height:auto, min-height:0, overflow:visible/hidden on the section and inner containers.

  2. Zero theme spacing vars on this section only:
    --section-padding-top, --section-padding-bottom, --spaced-section-spacing (via .shopify-section:has(.friends-section) and also via a custom wrapper class set in the section settings).

  3. Moved the blue background onto an inner wrapper (.friends-bg) and left outer wrapper neutral, so only content height should paint blue.

  4. JS fallback that adds a class to the parent .shopify-section on mobile to zero those vars. iOS Safari still shows extra space.

Any pointers or a small CSS snippet that reliably makes the section height hug content on iOS Safari would be hugely appreciated. Thanks! :folded_hands:

2

Need a preview password to see the site.

3

@tim_1 if you open this in an ikognito browser you do not need a password: MatuMate®

4

Ah, this link is a preview one. :ok_hand:
You have

.friends-left {
  flex: 1 1 600px; /* auto instead of 600px should fix it? or remove it altogether */
}

and its parent has:

@media (max-width: 768px) {
  .friends-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

So on mobile the container switches to the column direction and 600px becomes height instead of width.

1 Like
5

many thanks, worked. great support