Trustindex.io Google Review Plugin CSS Problem

[ad_1]

Hello everyone,

maybe someone can help me with this.

I created a WordPress Website with Elementor for a Customer. On the Home Page, I used the Google Reviews Plugin by [trustindex.io](https://trustindex.io).

My Problem is:

I applied some CSS to the shortcode Widget in Elementor.

Sadly on **mobile**, it doesn’t show as I wanted. (applied CSS Code is at the end).

**Important info:** Sometimes, once I clear the WPRocket Cache, it looks just as I wanted on mobile. But after a few minutes it changes again back to that horizontal view.

I would appreciate your help.

The website is: [https://immoagency-rheinland.de/](https://immoagency-rheinland.de/)

​

# Here’s how it looks now:

https://preview.redd.it/n7q41191vonc1.png?width=590&format=png&auto=webp&s=5139dcaae52a9ed38af0d44dbe95e8efd81e55e9

​

# How it should look:

​

https://preview.redd.it/ddaab516vonc1.png?width=369&format=png&auto=webp&s=ca1e070d590e32130575f34578d0a64bef1c59df

# My CSS Code for the Shortcode Widget:

`.ti-widget.ti-goog .ti-widget-container .ti-review-item >.ti-inner {`

`border-radius: 15px !important;`

`background-color: #240B27 !important;`

`border: 0 !important;`

`}`

​

`.ti-widget.ti-goog .ti-widget-container .ti-name {`

`font-size: 20px !important;`

`color: #fff !important;`

`}`

​

`.ti-widget.ti-goog .ti-widget-container .ti-date {`

`color: #fff !important;`

`}`

​

`.ti-widget.ti-goog .ti-review-content {`

`font-size: 18px !important;`

`color: #fff !important;`

`}`

​

`.ti-widget.ti-goog .ti-header-write-btn-container .ti-header-write-btn {`

`background-color: #240B27 !important;`

`border-radius: 15px !important;`

`border: 0 !important;`

`font-size: 14px !important;`

`}`

​

`.ti-widget.ti-goog .ti-row {`

`flex-direction: column !important;`

`}`

​

`u/media only screen and (max-width: 600px) {`

`.ti-widget.ti-goog .ti-row {`

`align-items: center !important;`

`}`

​

`span.ti-stars {`

`align-self: center !important;`

`}`

​

`.ti-rating-text {`

`align-self: center !important;`

`}`

`}`

​

`:root { /* star color */ –star-color-primary: #A98434; /* empty star color */ –star-color-secondary: #A98434; } /* full star */ .ti-widget .ti-star.f { -webkit-mask: url(`[`https://cdn.trustindex.io/assets/platform/Google/star/f.svg`](https://cdn.trustindex.io/assets/platform/Google/star/f.svg)`) no-repeat 50% 50%; background-color: var(–star-color-primary); background-image: none !important; } /* half star */ .ti-widget .ti-star.h { -webkit-mask: url(`[`https://cdn.trustindex.io/assets/platform/Google/star/f.svg`](https://cdn.trustindex.io/assets/platform/Google/star/f.svg)`) no-repeat 50% 50%; background: linear-gradient(90deg, var(–star-color-primary) 50%, var( –star-color-secondary) 50%) !important; } /* empty star */ .ti-widget .ti-star.e { -webkit-mask: url(`[`https://cdn.trustindex.io/assets/platform/Google/star/f.svg`](https://cdn.trustindex.io/assets/platform/Google/star/f.svg)`) no-repeat 50% 50%; background-color: var(–star-color-secondary); background-image: none !important; }`

[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer