[Horizon 4.1.1] Spacer block collapses on mobile when using pixel unit in column layout

Community Feedback
1

Short description of issue
Custom mobile size for spacer block in “pixel” mode does not apply the specified height when the parent uses layout-panel-flex–column or mobile-column.

Reproduction steps

  1. Add a Spacer block inside any group-block that renders in a column layout (default for hero content wrappers, group blocks with flex-direction: column).
  2. Enable “Custom mobile size” and set unit to pixel with any value (e.g. 144px).
  3. View the preview at mobile viewport (≤749px).

Current behaviour
The spacer collapses to 0 height on mobile. Explicit height is ignored.

Expected behaviour
Spacer should render with the configured pixel height on mobile.

Root cause (from source analysis)
In blocks/spacer.liquid, the mobile-pixel rule inside the column selector applies `flex: 0`, which the shorthand expands to`flex: 0 1 0`. The resulting `flex-basis: 0` overrides the explicit `height: var(–spacer-size-mobile)` in the flex main axis, and with `flex-grow: 0` the item stays at 0 height.

Relevant CSS block:
{% stylesheet %}
/* Fix: Horizon 4.1.1 spacer mobile-pixel altura em coluna.
flex: 0 do nativo colapsa o height porque flex-basis: 0 vence.
Solução: forçar flex-basis: auto para o height voltar a valer. */
@media screen and (max-width: 749px) {
.layout-panel-flex--column > .spacer-block--size-mobile-pixel,
.mobile-column > .spacer-block--size-mobile-pixel {
flex: 0 0 auto !important;
}
}
{% endstylesheet %}

Suggested fix
Change `flex: 0` to `flex: 0 0 auto` to preserve flex-basis: auto, allowing the explicit height to control the main-size.

Additional info
Horizon 4.1.1. Reproducible in both preview and live storefront. The row layout counterpart (row:not(.mobile-column)) does not have this issue because it uses `width: var(–spacer-size-mobile)` without setting flex.

2

Hey @RenanFukagawa - thanks for flagging this, and for the really clear repro/root-cause notes here.

I was able to reproduce this on a clean Horizon 4.1.1 theme. With a pixel-based custom mobile size inside a column/mobile-column layout, the spacer collapses on mobile because the current flex: 0 rule computes with a 0 flex-basis in the column axis.

I’ll report this internally on our side. In the meantime, the workaround you mentioned is for sure workable:

@media screen and (max-width: 749px) {
  .layout-panel-flex--column > .spacer-block--size-mobile-pixel,
  .mobile-column > .spacer-block--size-mobile-pixel {
    flex: 0 0 auto !important;
  }
}