Left align product review stars on mobile view

[houseof9]

I've just installed a new review app and want to left align the review stars on the product pages here on mobile view. I am using prestige theme.

[dmwwebartisan]

@houseof9 

Please share your store url and password ( If your store is password protected).

[Mustafa_Ali]

hey @houseof9 

<style>
@media screen and (max-width: 767px) {
.jdgm-prev-badge {
    display: flex !important;
    justify-content: start !important;
}
}
</style>

hey @houseof9 dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body> ----->
before the body ----->
if this code work please do not forget to like and mark it solution

[Guleria]

Hello @houseof9 ,

Go to assets -> base.css scroll down to bottom and at the bottom add this css

.product-info .jdgm-widget.jdgm-widget { 
    text-align: left;
}

Regards
Guleria

[Moeed]

Hey @houseof9 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.jdgm-prev-badge {
    text-align: -webkit-left !important;
}
</style>

RESULT:

If I managed to help then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Dan-From-Ryviu]

From your store admin > Sales channels > Online Store > Themes > Customize > Theme settings, in Custom CSS, paste this code 

@media (max-width: 749px) {
.product-info__block-list .jdgm-prev-badge {
    display: flex !important;
}
}

[Jenny6]

Hi @houseof9

You can use the below CSS to adjust the review stars and text contents to the left:

.jdgm-prev-badge {
text-align: left;
}

If this code is not working, try to add !important after it, like this:

.jdgm-prev-badge {
text-align: left !important;
}

 Kindly let me know if it works or not on your store. If not still, I will give you another code specifically. Thank you!

[namphan]

Hi @houseof9,

Please go to Customize > Theme settings > Custom CSS and add code:

@media screen and (max-width: 699px) {
.product-info__block-item .jdgm-widget.jdgm-preview-badge {
    text-align: left;
}
}

[WebDeskSolution]

Hello @houseof9 

Please follow the steps below after logging into the Shopify admin:

• Go to your Shopify Admin panel.
• Click on Online Store > Themes.

• Find the live theme and then click Actions > Edit code.

• Search base.css
• Insert the provided CSS code at the end of the file and save the changes.

@media screen and (max-width: 479px)
{
    .shopify-section--main-product .product-info__block-list .jdgm-widget .jdgm-prev-badge {
        text-align: left !important;
}
}

Please hit Like and Mark it as a Solution if you find our reply helpful.