Thank you, that is very helpful! One thing – on mobile, the blocks are stacked so I don’t want the vertical line – how can I make it so the vertical line doesn’t show when the blocks are stacked?
Thank you!
Topic summary
Goal: Add a single vertical divider between two columns in the Prestige theme and override uppercase styling for section headings, without affecting mobile.
What was implemented:
- Desktop divider: Apply the border only to the first column using a specific selector (.multi-column > div:nth-child(1) > .prose.text-start) so only one vertical line appears between definitions. Keep padding on .prose.text-start for spacing.
- Mobile behavior: Wrap the border rule in a desktop-only media query (@media only screen and (min-width: 1200px)) so the divider disappears when columns stack on smaller screens.
- Heading case override: The theme uses a paragraph with class h4 (p.h4), not an h4 tag. Override uppercase only in this section by targeting the section ID and p.h4 selector (#shopify-section-… p.h4 { text-transform: none }).
Notes:
- Images referenced illustrate placement of the divider and headings but are not required to apply the CSS.
Status: Solutions provided and acknowledged; issue appears resolved.