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

[LiIIipup]

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

[Liquid_xPert_SJ]

@LiIIipup 

please add  below css code to your theme.liquid file before the </body> 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:

[LiIIipup]

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

[Liquid_xPert_SJ]

@LiIIipup  please see the below updated code.

[Liquid_xPert_SJ]

@LiIIipup 

you for get to wrap the code in the style tags

<style>
@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;
}
}
</style>

Here is the updated code

[LiIIipup]

the text breaks for mobile devices 514x & lower

https://imgur.com/a/jj2CY1d

[Liquid_xPert_SJ · Accepted solution]

@LiIIipup 

please try this one

<style>
@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;
}
.card-information .price--on-sale .price__sale {
	flex-direction: inherit !important;
}
}
</style>

[Liquid_xPert_SJ]

@LiIIipup 

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

Thanks

[LiIIipup]

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

[Liquid_xPert_SJ]

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

[K-Mahesh]

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
    }
}

[LiIIipup]

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