Product pages - help align/change title and make work!

mbhlg
Explorer
52 0 16

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:

IMG_AD0E0D09362D-1.jpeg

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

dmwwebartisan
Shopify Partner
8533 2000 2691

@mbhlg 

Please share your store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
mbhlg
Explorer
52 0 16

@dmwwebartisan I've dropped you a message

0 Likes
dmwwebartisan
Shopify Partner
8533 2000 2691

@mbhlg 

 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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
mbhlg
Explorer
52 0 16

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

IMG_293EA3CC1212-1.jpeg

This is what I'd like it to look like please

IMG_FC2FFF9495E9-1.jpeg

Thanks!

0 Likes
dmwwebartisan
Shopify Partner
8533 2000 2691

@mbhlg 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
mbhlg
Explorer
52 0 16

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?

0 Likes
dmwwebartisan
Shopify Partner
8533 2000 2691

@mbhlg 

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;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
mbhlg
Explorer
52 0 16

@dmwwebartisan I'm afraid it's still the same and nothing has changed

0 Likes