Remove white spacing that is appearing above my trustpilot widget in my header on mobile - stiletto

[SanghitaWW]

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

[Made4uo-Ribe · 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!

[Moeed]

Hey @SanghitaWW 

I'm unable to locate it on your website, do you have it disabled?

Best Regards,

Moeed

[Rahul_dhiman]

Hello @SanghitaWW 
can't see any white spacing.

Thanks

[Sangeetanahar]

hello @SanghitaWW 

I have checked your website, there is no white line visible

thanks

[Made4uo-Ribe · 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!

[SanghitaWW]

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

[Made4uo-Ribe · 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!

[SanghitaWW]

Thank you so much for your help!

[SanghitaWW]

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

[Rahul_dhiman]

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

[SanghitaWW]

Hi!
Unfortunately this didn't work to fix the issue for me, but thank you!

[sakib_ShopiDevs]

• Go to your Shopify Admin.
• Navigate to Online Store > Themes.
• Click Actions > Edit Code on your desired theme.
• In the left-hand panel, find Assets and click on theme.css (or the appropriate CSS file).
• Paste the following code into the file:

@media (max-width: 960px) {
  .trustpilot-widget-trustbox-0-wrapper {
    margin-top: 0 !important;
    padding-top: 5px;
  }
}