(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.
1

Is it possible to resize & align the text under the collection image correctly for mobile devices (tablet, phone)?

How it currently looks:

https://imgur.com/a/m2c2eDX

How I want it to look:

https://imgur.com/a/9rECKf5

Store: https://3ce86e-bb.myshopify.com/

Keycode: yeigux

2

@LiIIipup

please add below css code to your theme.liquid file before the tag

Online Store > Edit Code > layout > theme.liquid

@media only screen and (max-width: 1024px) {
.card-information .price.price--on-sale {
	display: flex !important;
	align-content: center !important;
	justify-content: space-between !important;
}
}

Results:

2024-07-29 09_32_22-Products – My Store — Mozilla Firefox.png
2024-07-29 09_32_22-Products – My Store — Mozilla Firefox.png1294×466 3.84 KB

1 Like
3

I implemented the code but it doesn’t appear to change anything

4

@LiIIipup please see the below updated code.

1 Like
5

@LiIIipup

you for get to wrap the code in the style tags

Here is the updated code

6

the text breaks for mobile devices 514x & lower

https://imgur.com/a/jj2CY1d

7

@LiIIipup

please try this one
1 Like
8

Hello @LiIIipup
You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.
  2. Open your component-price.css file
  3. Paste the below code from bottom on component-price.css
@media only screen and (max-width: 1024px) {
    .product-card-wrapper .card__information .price {
        font-size: 1.4rem;
    }
    .product-card-wrapper .card__information .price .price__sale {
        justify-content: flex-end
    }
}

Screenshot 2024-07-29 103934.png
Screenshot 2024-07-29 103934.png513×599 11.8 KB

1 Like
9

@LiIIipup

Please mark as solved if your issue has been solved with the given code.

Thanks

10

I implemented the code, Is it possible to display the text on the same horizontal line? (without making the text smaller)

Here is how it looks with updated code:

https://imgur.com/a/gqnzHLe

Here is how I would like it to look

https://imgur.com/a/9rECKf5

11

I implemented the code, Is it possible to display the text on the same horizontal line? (without making the text smaller)

Here is how it looks with updated code:

https://imgur.com/a/gqnzHLe

Here is how I would like it to look

https://imgur.com/a/9rECKf5

12

@LiIIipup

because the screen size is small and the font size is larger we cannot make it one line we must have to reduce the font size but i suggest you to do not reduce the font size otherwise on smaller screens the text will be not readable properly just reduce it 2px maximum for smaller devices like < 640.

1 Like