Left align product review stars on mobile view

Store Design
1

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.

IMG_0591.jpg
IMG_0591.jpg1206×2622 134 KB

2

@houseof9

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

3

hey @houseof9

Mustafa_Ali_0-1751268880082.png
Mustafa_Ali_0-1751268880082.png690×589 41.7 KB

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 ----->
before the body ----->
if this code work please do not forget to like and mark it solution

4

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

5

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 tag

RESULT:

Moeed_0-1751269587985.png
Moeed_0-1751269587985.png352×757 110 KB

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

Best Regards,
Moeed

6

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;
}
}
7

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!

8

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;
}
}
9

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.