Shopify themes, liquid, logos, and UX
Is it possible to resize & align the text under the collection image correctly for mobile devices (tablet, phone)?
How it currently looks:
How I want it to look:
Store: https://3ce86e-bb.myshopify.com/
Keycode: yeigux
Solved! Go to the solution
This is an accepted solution.
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>
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:
I implemented the code but it doesn't appear to change anything
@LiIIipup please see the below updated code.
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
This is an accepted solution.
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>
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:
Here is how I would like it to look
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.
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
}
}
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:
Here is how I would like it to look
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024