(Dawn) Resize & Align Text Under Collection Image for Mobile Devices

Store Design

Topic summary

A user seeks to resize and align pricing text beneath collection images on mobile devices (tablets and phones). The text currently displays improperly, breaking across multiple lines.

Solutions Provided:

Multiple experts offered CSS code snippets to address the issue:

  • Initial suggestion: Add flexbox CSS to theme.liquid targeting screens under 1024px
  • Alternative approach: Modify component-price.css with media queries to adjust font size and justify content

Current Status:

The user successfully implemented the code but faces a remaining challenge: displaying price text on a single horizontal line without reducing font size. Screenshots show the text still breaks on devices 514px and smaller.

Expert Recommendation:

The final advice suggests that keeping text on one line without reducing font size is impractical on smaller screens. The expert recommends reducing font size by maximum 2px for devices under 640px to maintain readability while achieving better layout.

Resolution: The discussion remains open, as the user’s preference (single-line text without size reduction) conflicts with responsive design constraints for small mobile screens.

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

@LiIIipup please see the below updated code.

1 Like