Change size of Gartner Peer Insights Widget on Website Pages

[sboug]

Hi,

I'm looking at add the Gartner Peer Insights widget onto our website but I want to adjust the size of the widget and I'm not sure how. I'm looking to change the width so it's more landscape than portrait. 

<script type="text/javascript"
src=https://www.gartner.com/reviews/public/Widget/js/widget.js>
</script>
<script type="text/javascript">
GartnerPI_Widget({
size: "large",
theme: "dark",
sourcingLink: "",
widget_id: "NTUwNzg4OTMtMDkxYS00MGQ5LWE0YzYtYThmNjY3Y2Q0OTM2",
version: "2",
container:document.querySelector("#gartnerDiv")
})
</script>

Can anyone help with this? 

Thanks

Shelley

[sboug]

lt's halfway down on this page https://www.cloudficient.com/enterprise-vault-migration-prep-guide

[piersg]

If you do this

#gartnerDiv > div {
    width: 100%;
}
/* this one to move the "As of X 2023" date */
.gartner-pi-as-of-date {
    transform: rotate(-90deg) translate(131px,233px) !important;
}

You'll get this

[sboug]

yes this is perfect, thank you!

would i add this after the script i pasted above?

[piersg · Accepted solution]

Yes, you can do. Copy paste this after the closing script tag:

<style>
#gartnerDiv > div {
    width: 100%;
}
.gartner-pi-as-of-date {
    transform: rotate(-90deg) translate(131px,233px) !important;
}
@media (max-width: 767px) {
    .gartner-pi-as-of-date {
        display: none;
    }
}
</style>

I've added a media query to hide the as of date for mobile as it's too small to read and will go off the screen causing overflow.

[sboug]

thank you so much - this is exactly what I was looking for - apprecaite the quick response 😀

[piersg]

Can you share a page with the widget on? Much easier to help with CSS when you can see it 🙂