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

Store Design
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