What's your biggest current challenge? Have your say in Community Polls along the right column.

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
9179 2190 2706

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
9179 2190 2706

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
6368 1725 2088

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!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


Rahul_dhiman
Shopify Partner
668 131 136

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 Apps by me

Made4uo-Ribe
Shopify Partner
9179 2190 2706

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
9179 2190 2706

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
668 131 136

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 Apps by me

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
11 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