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

Solved

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

LiIIipup
Tourist
5 0 0

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

Accepted Solution (1)
Liquid_xPert_SJ
Shopify Partner
1242 133 176

This is an 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>

 

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

View solution in original post

Replies 11 (11)

Liquid_xPert_SJ
Shopify Partner
1242 133 176

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

2024-07-29 09_32_22-Products – My Store — Mozilla Firefox.png

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
LiIIipup
Tourist
5 0 0

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

Liquid_xPert_SJ
Shopify Partner
1242 133 176

@LiIIipup  please see the below updated code.

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Liquid_xPert_SJ
Shopify Partner
1242 133 176

@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

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
LiIIipup
Tourist
5 0 0

the text breaks for mobile devices 514x & lower

 

https://imgur.com/a/jj2CY1d

Liquid_xPert_SJ
Shopify Partner
1242 133 176

This is an 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>

 

 

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Liquid_xPert_SJ
Shopify Partner
1242 133 176

@LiIIipup 

 

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

 

Thanks

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
LiIIipup
Tourist
5 0 0

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
Shopify Partner
1242 133 176

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

- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂- If you need any technical assistance, feel free to send me a DM. You no longer have to search for answers without getting a response.
- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂

K-Mahesh
Shopify Partner
21 3 5

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

 

LiIIipup
Tourist
5 0 0

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