My Code Works On My Desktop and on the Desktop Mobile Preview but not on the actual mobile

Pipsandoats · ‎03-20-2024

Hello so i have been doing some coding to upgrade the look of my website, while doing a reviews page I have wanted to make the separation line between the picture and the review to be the same as the background picture and I have thought I have done it as it changes on both the desktop view and the desktop mobile preview but not on the actual mobile. This is the code I used...

}

.vtl-pr-review-card__main-photo-holder {
background-color: #C9C69C !important;

}

My second issue is very small but very annoying it's the same issue as the first problem it works with desktop but not with mobile. It's regarding the lines underlining the shipping, description and our guarantee, this is the code I have used for that

}

.vt-accordion {
border-bottom: 1px solid #222222 !important

}

All the help will be appreciated

ThePrimeWeb · ‎03-20-2024

The code is ok, you just have to add it to a different place.

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.vtl-pr-review-card__main-photo-holder {
    background-color: #C9C69C !important;
}

.vt-accordion {
    border-bottom: 1px solid #222222 !important
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-20-2024

Hey @Pipsandoats,

Can you share the link to your store and password (if any) or disable the password temporarily

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Pipsandoats · ‎03-20-2024

Hello this is the link https://pipsandoats.com/ !

ThePrimeWeb · ‎03-20-2024

The code is ok, you just have to add it to a different place.

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.vtl-pr-review-card__main-photo-holder {
    background-color: #C9C69C !important;
}

.vt-accordion {
    border-bottom: 1px solid #222222 !important
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Pipsandoats · ‎03-20-2024

Thank You so much for such a quick reply and for figuring it out works perfectly now!

My Code Works On My Desktop and on the Desktop Mobile Preview but not on the actual mobile