Changing font size for trustpilot widget?

Site URL: https://www.physicsowls.com/

Hello!

I've added the Trustpilot Widget to my site. Unfortunately at the Trustpilot site you can't change the 'font-size' it seems. It does offer the option to change the height of the widget but this doesn't change the size of the text automatically which seems a bit silly. I tried looking through the forum and tried this code but while this changes the font size of the text called 'trustpilot' in 'edit mode' it does nothing for the font size of the trust pilot text that shows up when saved and published:

//Home-page - Trying to increase the font-size of Trustpilot Widget//
div#block-yui_3_17_2_1_1652721180978_2633 * {
    font-size: 100px;
}

Is there a way to do this with custom CSS or is it a Trustpilot Widget issue? It just looks so small on the website and makes me wonder if there's a better and cheaper alternative to Trustpilot instead. 

Thanks in advance! 🙂 

Latoya

Manipulating the content of an iframe is impossible.... BUT you can mess with the iframe itself. Which seems to work in your case.

.trustpilot-widget iframe {
    transform: scale(1.5);
}

Thanks @DV2 - That worked a treat! ❤️ It looks so much better now. 

I didn't notice before but on mobile view it's now too wide. I tried a couple of different code bits but am struggling to understand how to select the iframe in mobile view for the trustpilot widget to force it to scale so that it remains within the bounds of the mobile screen. 

@DV2 - do you happen to have any thoughts on what code I can use to fix that bit? 

Thanks in advance!

I should have thought to check for that. Let's try wrapping the CSS in a media query so it only scales up when the screen is large enough.

@media only screen and (min-width: 768px){
  .trustpilot-widget iframe {
    transform: scale(1.5);
  }
}

There seems to be something else stretching the page just a little too wide (horizontal scroll bar appears) until you get to 1450px of screen width. I'm not sure what is causing it.

Thanks @DV2  that has worked! Much appreciated 🙂 

On 5/27/2022 at 1:33 PM, DV2 said:

I should have thought to check for that. Let's try wrapping the CSS in a media query so it only scales up when the screen is large enough.

@media only screen and (min-width: 768px){
  .trustpilot-widget iframe {
    transform: scale(1.5);
  }
}

There seems to be something else stretching the page just a little too wide (horizontal scroll bar appears) until you get to 1450px of screen width. I'm not sure what is causing it.

@DV2 This code also worked for me. Are you able to advise how to reduce the white space around the Trustpilot widget please?

Do you just mean the padding added by a section in Squarespace? 

You can reduce the section height to as low as it will go. If that's still too much whitespace, you can move the code block into the section above or below it.