App Judge

Shopify Discussion
1

hi, How can I reduce the font size of the reviews in the Judge.me app on desktop only, without changing the font size on mobile?

3

Hi!

On Savor you can shrink the Judge .me review text on desktop only.

Savor doesn’t have a “Theme settings > Custom CSS” box

Judge .me’s own CSS field won’t do desktop only.

So add it as a tiny Custom Liquid section on the product page.
Before:

Judge .me reviews at the default size on desktop
Judge .me reviews at the default size on desktop750Ă—787 162 KB

After:

Desktop review text smaller, mobile unchanged
Desktop review text smaller, mobile unchanged750Ă—745 148 KB

Steps

  • Online Store > Themes > Customize
  • Open the Default product template (top center dropdown)
  • Under Template, Add section > Custom Liquid

Product template, Add section, Custom Liquid
Product template, Add section, Custom Liquid1140Ă—930 171 KB

  • Paste this, then Save:
<style>
  @media screen and (min-width: 750px) {
    .jdgm-rev__body,
    .jdgm-rev__author,
    .jdgm-rev__title { font-size: 13px !important; }
  }
</style>

Paste the code in the Liquid box, then Save
Paste the code in the Liquid box, then Save1864Ă—1130 208 KB

Notes

  • Change 13px to the size you want.
  • Phones (under 750px wide) are left alone, so mobile stays the same.
  • This targets the review text, name and title. To shrink the whole widget instead, swap those three lines for .jdgm-rev-widg.
  • The section can sit anywhere on the product template. The style still reaches the reviews.

Regards,
Ajay,

5

Hey, @toredj
Hope you are doing well!
You can do this with a desktop only CSS media query, so the mobile review font stays unchanged.

Add this to your theme’s custom CSS:

@media screen and (min-width: 750px) {
  .jdgm-rev__body {
    font-size: 13px !important;
  }
}

If that selector doesn’t affect your specific Judge.me review widget, inspect the review text and target its exact class instead.

8

Hi,

You can do this with a desktop

only CSS media query so your mobile review font remains unchanged.

Try adding:

@media screen and (min-width: 750px) {
  .jdgm-rev__body {
    font-size: 13px;
  }
}

If you also want to reduce the reviewer name or title size, you can target .jdgm-rev__author and .jdgm-rev__title.

You can add it through your theme CSS. If you are using the Savor theme and don’t have a Custom CSS option, add it inside a Custom Liquid section using a <style> tag.

9

Hello @toredj
Normally, you can do this with a desktop only css media query and let the mobile styling be. Add the rule via Shopify’s theme code or the custom css section of the theme, targeting the element that has the Judge.me review text. Use a media query like min-width:750px, and then change font-size value for that selector. Open review text in your browser and find proper Judge.me class because selector may vary depending on which widget are you using. It’s scoped to only desktops.

10

just add this code to your main css file which will be theme.css or global.css

@media screen and (min-width: 990px) {
.jdgm-rev__body,
.jdgm-rev__title {
font-size: 13px !important;
}
}