Making gaps of 'Multiple images with text' section consistent

Technical Q&A
, , ,

Topic summary

A user is experiencing inconsistent spacing between scrolling arrows and a subheading (‘Our Proprietary Blend’) in a ‘Multiple images with text’ section. The gap fluctuates during scrolling, and they want to minimize and stabilize it.

Proposed Solution:
A CSS fix was provided targeting the specific Shopify section, setting prose height to 0 by default and auto when selected:

#shopify-section-template--23970574467361__multiple_images_with_text_7fDKMb .prose{ height: 0; }
#shopify-section-template--23970574467361__multiple_images_with_text_7fDKMb .prose.is-selected { height: auto; }

Current Status:
The user cannot save the CSS code in Theme Settings > Customize > Custom CSS and is asking whether it can be added through the code editor instead. The issue remains unresolved pending alternative implementation methods.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

As I scroll through, there is a gap between the scrolling arrows and the subheading ‘Our Proprietary Blend’ and it constantly fluctuates. How do I minimize the gap and make it consistent as I scroll through?

Solaris A Natural Uplift in Productivity and Wellness.jpeg
Solaris A Natural Uplift in Productivity and Wellness.jpeg1170×2532 196 KB

2

Hi @btwu10

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings

#shopify-section-template--23970574467361__multiple_images_with_text_7fDKMb .prose{ height: 0; }
#shopify-section-template--23970574467361__multiple_images_with_text_7fDKMb .prose.is-selected { height: auto; }
3

For some reason when I try to add this code to the Theme Settings Custom CSS, the theme won’t let me save. Is there anywhere else I can add this code like in the edit code portal?