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.
Topic summary
A user is experiencing alignment issues with their JudgeMe reviews carousel on mobile devices—the reviews are not centered and appear too narrow on the page.
Initial Solutions Attempted:
- One responder suggested contacting JudgeMe support or checking the section’s layout settings
- Another provided custom CSS to center-align the review text and reviewer names, but this did not resolve the issue
Working Solution:
A contributor provided code to be added to the theme.liquid file before the </body> tag, which successfully centered the carousel.
Follow-up Issue:
After the centering fix, the user requested the carousel be expanded to full screen width, as it appeared too narrow. The heading and text should span the full page width and display in a single line.
Final Resolution:
Additional code was provided to be added alongside the previous fix in theme.liquid, which should make the review heading and text display at full width as requested. The discussion appears resolved with this two-part CSS solution.
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.
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.
Thanks @imatikshaikh - unfortunately its not working.
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 tag and save.
Output will be like this -:
I hope the code helps you.
Please share if you have any queries.
Thank you.
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.
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.
Output will be like this -:
I hope it helps.
Thank you.