Shopify Product Review Text Alignment issue on mobile view

[EcoStaples]

Hello, I recently asked shopify for help in centring a line of text created on my product pages via the Shopify Product Review App. They were unable to assist me in resolving, much appreciate any instructions you can provide.

Problem:

The line " From 2 Reviews   [Write a review Here]" is not centred on mobile view (shows correct on PC view)

Example URL:

Men's Bamboo Vee Neck T shirt | Sustainable Tees | Eco Staples

Images:

I have included 2 images to further illustrate the issue. The PC screenshot is showing the line correctly spaced & centred, while the Mobile image clearly shows the text bunched up and to the left. 

Looking forward to hearing back soon

Thanks,

Warren

Eco Staples

When viewed on mobileWhen viewed on PC, shows correctly.

[binal_identix · Accepted solution]

Hello @EcoStaples!

Hope you are doing well.

Please add the below CSS in the theme.css file at the bottom:

@media only screen and (max-width: 480px){
.product-single__meta .rte {
    text-align: center !important;
}
.spr-summary-actions-newreview {
    float: right !important;
}
}

Hope this will help you out.

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

.product-single__meta .rte {
text-align: center;
}

[EcoStaples]

Hi ZestardTech,

Many Thanks for your response and solution to my issue. I implemented your code and it indeed centred that line of text. Is there any way to put a few spaces in between so it looks like this "From 2 reviews          [Write a Review here]"

Much appreciate your expert advice.

Regards,

Eco Staples

[binal_identix · Accepted solution]

Hello @EcoStaples!

Hope you are doing well.

Please add the below CSS in the theme.css file at the bottom:

@media only screen and (max-width: 480px){
.product-single__meta .rte {
    text-align: center !important;
}
.spr-summary-actions-newreview {
    float: right !important;
}
}

Hope this will help you out.

[EcoStaples]

Many Thanks @binal_identix 

Your solution works great. It's has better spaced the line text and looks a lot better. If I wanted to push the "From 2 reviews" text to align left, is there any way to do that? 

Warm Regards,

Eco Staples

[binal_identix · Accepted solution]

Hello @EcoStaples!

Yes, please remove the below line of code from the code given by me to make it work as you required:

.spr-summary-actions-newreview {
    float: right!important;
}