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

@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: spa…

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

@LiIIipup please see the below updated code.

the text breaks for mobile devices 514x & lower https://imgur.com/a/jj2CY1d

Hello @LiIIipup You can add code by following these steps Go to Online Store → Theme → Edit code. Open your component-price.css file Paste the below code from bottom on component-price.css @media only screen and (max-width: 1024px) { .product-card-wrapper .card__information .price { …

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

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

@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 …

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

Store Design

Liquid_xPert_SJ July 29, 2024, 4:54am 5

@LiIIipup

you for get to wrap the code in the style tags

Here is the updated code

Topic		Replies	Views
(Dawn) Mobile UI Text Alignment/Resize for Featured Collection Store Design design	1	32	July 28, 2024
Price alignment on featured collection Store Design design , collection-page , html	6	44	July 10, 2024
Align text and title Store Design design , collection-page	13	73	January 2, 2025
How to have text be in one line for mobile under collections image Store Design design , customizations , collection-page , css	2	20	January 20, 2023
align text on phone Store Design design , collection-page , landing-page	1	20	December 6, 2024

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

Related topics