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

Store Design
, , ,
1

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
Screenshot 2024-09-26 at 12.10.30.png998×1420 349 KB

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

Thanks

2

Hey @SanghitaWW

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

Best Regards,

Moeed

3

Hello @SanghitaWW
can’t see any white spacing.

17.png
17.png1229×142 141 KB

Thanks

4

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 tag and paste the code below before the tag.

And Save.

result:

Made4uoRibe_0-1727350549571.png
Made4uoRibe_0-1727350549571.png763×202 166 KB

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

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

6
  • 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;
  }
}
7

Add this code, or replace on this code.

And sve.

Result:

Made4uoRibe_0-1727355566204.png
Made4uoRibe_0-1727355566204.png1547×367 431 KB

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

8

Thank you so much for your help!

9

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
IMG_9758.PNG1170×2532 548 KB

Thanks for all your help on this,

Sanghita

10

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
1.png565×829 428 KB

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

11

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