JudgeMe Reviews Carousel Not Centred

JudgeMe Reviews Carousel Not Centred

LukeMac
Excursionist
26 0 4

Hi, my reviews carousel is not appearing centred on mobile devices. I am using the JudgeMe app for my reviews. Please see the image of how I want it to be:

Screenshot 2024-06-19 at 11.12.41.png

 

This is how it is appearing:

IMG_0082.PNG

 

Please help me get it like the first image. 

 

Thanks in advance.

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
8467 1665 1676

Hi @LukeMac 

You may check if there are any settings to change the layout of that section, or you can contact JudgeMe support so they can help you in this case. 

- Helpful? Like and Accept solution to let me know or Buy me Coffee ❤️!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

imatikshaikh
Shopify Partner
85 15 14

Hi @LukeMac Just add this custom css code

.jdgm-carousel--compact-theme .jdgm-carousel-item__review {
    text-align: center;
}

.jdgm-carousel--compact-theme .jdgm-carousel-item__reviewer-name {
    text-align: center;
}


If you don't know where to add it, you can check this link to understand where to add it in dawn theme.
Or message me and I'll help you out.

Available for hire, for all small tasks and full store development, theme-based and custom.
If I was able to help you. like my post and mark it as an accepted solution.
Founder @ Ecommerce Gurus Agency
A KodeKult Company | Contact Me via email
LukeMac
Excursionist
26 0 4

Thanks @imatikshaikh - unfortunately its not working.

 

Anshul_arora
Navigator
450 128 93

Hello @LukeMac ,

I understand you are looking to fix the Review section of your store for mobile version.

Please add the below mentioned code at the bottom of the theme.liquid file before </body> tag and save.

<style>
.jdgm-carousel-wrapper {
display: inline-block;
}
@media screen and (max-width: 767px) {
.jdgm-carousel-title-and-link {
height: auto !important;
}
section.jdgm-widget.jdgm-carousel.jdgm-carousel--compact-theme.jdgm-carousel--done {
margin: 0 25% !important;
}
}
</style>


Output will be like this -:

Anshul_arora_0-1718799452540.png

 

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
LukeMac
Excursionist
26 0 4

Thanks @Anshul_arora, it worked. However, would it be possible to make it the full with of the screen.

 

See Image:

IMG_0083.PNG

 

Its very skinny on the page. 

 

Can we please try make it like this:

Screenshot 2024-06-19 at 11.12.41.png

 

The colour is a change I made, so don't worry about that. I'd like the heading and text to fit the full width of the page as the picture above please. 

 

Anshul_arora
Navigator
450 128 93

Hello @LukeMac ,


Ok, I understand you are looking to display Review heading & text in full width, so it will display in 1 line.


Please add this code with the previously shared code in theme.liquid file.

<style>


@media only screen and (max-width: 768px)
{
.jdgm-carousel-title-and-link {
width: 100% !important;
}

section.jdgm-widget.jdgm-carousel.jdgm-carousel--compact-theme.jdgm-carousel--done {
width: 70% !important;
}
}
</style>


Output will be like this -:

Anshul_arora_0-1718874075094.png


I hope it helps.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here