Field positioning

I just want to shift the star ratings to the right. and the left can stay as it is. the stars should be in the same line as the date.

I was able to achieve this using the following CSS:

.glsr-review-title h3 {
    font-size: 22px !important;
}

#et-boc .glsr-ltr .glsr-default .glsr-review-rating, .glsr-ltr .glsr-default .glsr-review-rating {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    align-items: flex-end;
    margin-top: -2.5em;
}

#et-boc .glsr-default .glsr-review-avatar+.glsr-review-author, .glsr-default .glsr-review-avatar+.glsr-review-author {
    margin-bottom: -5px;
}
#et-boc .glsr-default .glsr-review>div, .glsr-default .glsr-review>div {
    margin-bottom: 8px;
}

however, now the problem is that in mobile devices the stars overlap the title text.

How can i fix that?

Which website review design are you wanting to imitate?

It is a custom design. I have uploaded the picture in the google drive. I am sharing the link here. The star ratings should be shifted to the extreme right. And while on mobile it should be shown in the default state like this (stars appear at the left with the date on the right) Is is possible?

I also have another question. It is possible to link the avatar with the facebook of that email id so as to show the facebook profile picture in the avatars of the review?

The best way to do this kind of layout is with CSS Flexbox.

Here are some links that may help you:

https://flexboxfroggy.com/
https://apps.workflower.fi/css-cheats/?name=flexbox

Site Reviews does not integrate with the Facebook API to get the avatars. Additional avatar sources in a feature that may be considered for a later version.

Yes. I have used CSS flexbox. Thanks. It worked.