-
I am trying to get one of my google review widgets to the left or right side of the footer. The problem is that it makes an extra white bar. I am trying to get it infront of everything and have it scroll with me from the top down and vice versa. Have tried the hooks for generate_footer.
<div class="tr-widget" data-id="6026" data-view="list" data-lang=""><a href="https://trust.reviews/" class="trcr" target="_blank">Powered by <span>Trust.Reviews</span></a></div><script type="text/javascript" src="https://cdn.trust.reviews/widget/embed.min.js" defer></script>
An example could be from here. https://trust.reviews/#about
Thankyou
-
Hi there,
can you share a link to your site where i can see the issue ?
-
Sure i have provided a temp login since it is in maintenance mode.
-
Some CSS like this can be used to fix its position:
.tr-widget { position: fixed; z-index: 100000; bottom: 20px; left: 20px; }You can change the
left: 20px;toright: 20px;to flip sides
The20pxis how far from the browser viewport side it sits.What would be the expectation on smaller screens ?
You may want to consider hiding the one at the bottom of the screen and adding it elsewhere too -
Thanks for that,
My plan was to have a close button or just not have it for mobile etc.
-
To close it, you would need to check if the widget has that option.
For now if you use this CSS:@media(min-width: 769px) { .tr-widget { position: fixed; z-index: 100000; bottom: 20px; left: 20px; } } .tr-widget { text-align: center; }then on small screens it will just center itself below the footer. Where it won’t get in the way.
As a note, you could add the widget anywhere on the site eg. as a footer or sidebar widget, where it could remain on Mobile. And that CSS above would still work for larger screens.
- You must be logged in to reply to this topic.