Shopify themes, liquid, logos, and UX
Hi there,
I have embedded a trust pilot widget in my header and it appears just as I want it on desktop, however on mobile a white space appears between the announcement bar and my header with the widget - and I'm not quite sure how to trouble shoot it. Any help would be amazing!
site url is: https://vitaminalab.com/
Thanks
Solved! Go to the solution
This is an accepted solution.
Hi @SanghitaWW
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
div#trustpilot-widget-trustbox-0-wrapper {
margin-top: 0 !important;
padding-top: 5px !important;
}
</style>
And Save.
result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
This is an accepted solution.
Add this code, or replace on this code.
<style>
div#trustpilot-widget-trustbox-0 {
position: fixed !important;
top: 15px;
right: 50%;
transform: translateX(50%);
z-index: 1000 !important;
}
div#trustpilot-widget-trustbox-0-wrapper {
position: relative !important;
}
.header__row.header__row-desktop.lower.three-segment {
padding-top: 15px;
}
@media only screen and (max-width: 989px) {
.header__inner {
padding-top: 10px;
}
div#trustpilot-widget-trustbox-0-wrapper {
margin-top: 0 !important;
padding-top: 5px !important;
}
}
</style>
And sve.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Hey @SanghitaWW
I'm unable to locate it on your website, do you have it disabled?
Best Regards,
Moeed
Hello @SanghitaWW
can't see any white spacing.
Thanks
This is an accepted solution.
Hi @SanghitaWW
Check this one.
From your Shopify admin dashboard, click on "Online Store" and then "Themes"
Find the theme that you want to edit and click on "Actions" and then "Edit code".
In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag.
<style>
div#trustpilot-widget-trustbox-0-wrapper {
margin-top: 0 !important;
padding-top: 5px !important;
}
</style>
And Save.
result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you so much for your help on this! It worked perfectly!
I wonder if you could also help me with another issue I am having with this on desktop - the trustpilot widget disappears on scroll but i would like it to be sticky - just as it is on mobile.
is this something you could help me with?
Thanks
This is an accepted solution.
Add this code, or replace on this code.
<style>
div#trustpilot-widget-trustbox-0 {
position: fixed !important;
top: 15px;
right: 50%;
transform: translateX(50%);
z-index: 1000 !important;
}
div#trustpilot-widget-trustbox-0-wrapper {
position: relative !important;
}
.header__row.header__row-desktop.lower.three-segment {
padding-top: 15px;
}
@media only screen and (max-width: 989px) {
.header__inner {
padding-top: 10px;
}
div#trustpilot-widget-trustbox-0-wrapper {
margin-top: 0 !important;
padding-top: 5px !important;
}
}
</style>
And sve.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you so much for your help!
Hey!
Just a quick one - I wonder if you could help me! This worked perfectly to fix my desktop issue, however it is now making the mobile widget squashed... Is there any way to fix this?
I have attached a screenshot below:
Thanks for all your help on this,
Sanghita
Hello @SanghitaWW
Go to online store ---------> themes --------------> actions ------> edit code------->theme.css
at the end of the file and save.
.image-hero.image-hero--image-aspect-custom .image-hero__image-container .image__img {
object-fit: inherit;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Hi!
Unfortunately this didn't work to fix the issue for me, but thank you!
@media (max-width: 960px) {
.trustpilot-widget-trustbox-0-wrapper {
margin-top: 0 !important;
padding-top: 5px;
}
}
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024