Shopify themes, liquid, logos, and UX
Hello,
I'm using debut theme and am having some issues when trying to access my product pages in mobile view.
My product section currently looks like this:
Would someone be able to help me align the products on the page/remove the double pricing and the sale/sold out part and make the links work?
Thanks
Please share your store URL.
Please add the following code at the bottom of your assets/theme.css.liquid file
@media only screen and (min-width: 750px){
.template-collection .price {
display: block !important;
text-align: center !important;
}
.template-collection .product-card__title {
display: block !important;
text-align: center !important;
}
.template-index .price {
display: block !important;
text-align: center !important;
}
.template-index .product-card__title {
display: block !important;
text-align: center !important;
}
}
@media only screen and (max-width: 749px){
.price__sale {display: none;}
.price__regular {display: block;}
.price__badge {display: none;}
.price-unit-price{ display: none;}
.template-collection .price {
display: block !important;
text-align: center !important;
}
.template-collection .product-card__title {
display: block !important;
text-align: center !important;
}
.template-index .price {
display: block !important;
text-align: center !important;
}
.template-index .product-card__title {
display: block !important;
text-align: center !important;
}
}
Thanks!
! Thanks so much, looks a lot better.
However could the listings be centralised and the pricing moved to the left?
Also unfortunately the product links still don't work.
This is what I'd like it to look like please 🙂
Thanks!
Remove previous code add this code
@media only screen and (min-width: 750px){
.template-collection .price {
display: block !important;
text-align: center !important;
}
.template-collection .product-card__title {
display: block !important;
text-align: center !important;
}
.template-index .price {
display: block !important;
text-align: center !important;
}
.template-index .product-card__title {
display: block !important;
text-align: center !important;
}
}
@media only screen and (max-width: 749px){
.price__sale {display: none;}
.price__regular {display: block;}
.price__badge {display: none;}
.price-unit-price{ display: none;}
.template-collection .price {
display: block !important;
text-align: center !important;
}
}
Thank you, just tried this and unfortunately am still having the same issues and it doesn't look any different.
Is there an alternative I can try please?
Not remove previous css add this new css code
@media only screen and (max-width: 749px){
.template-collection .price {
display: block !important;
text-align: left !important;
}
.template-collection .product-card__title {
display: block !important;
text-align: left !important;
}
.template-index .price {
display: block !important;
text-align: left !important;
}
.template-index .product-card__title {
display: block !important;
text-align: left !important;
}
.product-card__image-wrapper {
margin:0 auto;
text-align:center;
}
}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024