Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Remove white spacing that is appearing above my trustpilot widget in my header on mobile - stile

Solved

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

SanghitaWW
Shopify Partner
22 0 5

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!

 

Screenshot 2024-09-26 at 12.10.30.png

 

site url is: https://vitaminalab.com/

Thanks

Accepted Solutions (2)

Made4uo-Ribe
Shopify Partner
9094 2173 2683

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:

Made4uoRibe_0-1727350549571.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Made4uo-Ribe
Shopify Partner
9094 2173 2683

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:

Made4uoRibe_0-1727355566204.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 10 (10)

Moeed
Shopify Partner
6333 1717 2072

Hey @SanghitaWW 

 

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

 

Best Regards,

Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Rahul_dhiman
Shopify Partner
658 128 134

Hello @SanghitaWW 
can't see any white spacing.
17.png

Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167

Made4uo-Ribe
Shopify Partner
9094 2173 2683

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:

Made4uoRibe_0-1727350549571.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
SanghitaWW
Shopify Partner
22 0 5

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
Shopify Partner
9094 2173 2683

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:

Made4uoRibe_0-1727355566204.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
SanghitaWW
Shopify Partner
22 0 5

Thank you so much for your help!

SanghitaWW
Shopify Partner
22 0 5

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:
IMG_9758.PNG

Thanks for all your help on this,

Sanghita

Rahul_dhiman
Shopify Partner
658 128 134

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
1.png

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167
SanghitaWW
Shopify Partner
22 0 5

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

sakib_ShopiDevs
Shopify Partner
10 1 2
  • 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;
  }
}

 

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers