JudgeMe Reviews Carousel Not Centred

[LukeMac]

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:

This is how it is appearing:

Please help me get it like the first image. 

Thanks in advance.

[Dan-From-Ryviu]

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. 

[imatikshaikh]

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.

[LukeMac]

Thanks @imatikshaikh - unfortunately its not working.

[Anshul_arora]

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 -:

I hope the code helps you.

Please share if you have any queries.

Thank you.

[LukeMac]

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

See Image:

Its very skinny on the page. 

Can we please try make it like this:

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]

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 -:

I hope it helps.

Thank you.