Senja
Widgets

How to limit testimonials shown on mobile vs desktop using CSS

Learn how to control the number of testimonials displayed on different devices by using custom CSS media queries with your Senja widget.

This is applicable for paid plans only: Starter and Pro.

Why limit testimonials on mobile?

Mobile screens have limited space, and showing too many testimonials can overwhelm users or cause performance issues. By limiting testimonials on mobile while keeping more visible on desktop, you create a better user experience across all devices.

Prerequisites

Before you start, you'll need:

  • A Senja widget already embedded on your website

  • Access to add custom CSS to your widget or website

  • Basic understanding of CSS (helpful but not required)

How to limit testimonials using CSS

The technique uses CSS media queries combined with the nth-child selector to hide specific testimonials on smaller screens.

Step 1: Identify your widget type

First, you need to know which Senja widget type you're using, as the CSS selector will vary:

  • Hero Quote widgets: Use .sj-hero-quotes

  • Grid widgets: Use .sj-grid

  • Carousel widgets: Use .sj-carousel

  • List widgets: Use .sj-list

Step 2: Add the CSS code

Here are examples for common scenarios:

Show 3 testimonials on mobile, 6 on desktop (Hero Quote widget)

@media only screen and (max-width: 600px) {
  .sj-hero-quotes > *:nth-child(n+4) {
    display: none;
  }
}

Show 2 testimonials on mobile, 4 on desktop (Grid widget)

@media only screen and (max-width: 768px) {
  .sj-grid > *:nth-child(n+3) {
    display: none;
  }
}

Show 1 testimonial on mobile, 3 on desktop (any widget type)

@media only screen and (max-width: 480px) {
  .senja-embed > *:nth-child(n+2) {
    display: none;
  }
}

Step 3: Apply the CSS

You can add this CSS in several ways:

Option 1: Senja widget custom CSS

  1. Open your widget in Senja Studio

  2. Click on Design

  3. Click on Advanced

  4. Click on Custom CSS

  5. Paste your CSS code

  6. Click Save changes

Option 2: Your website's CSS file

Add the CSS to your website's stylesheet or in a <style> tag in your page's <head> section.

Common breakpoints and examples

Here are responsive breakpoints commonly used for different devices:

Mobile-first approach

/* Mobile (default): Show 2 testimonials */
/* No media query needed for mobile-first */

/* Tablet: Show 4 testimonials */
@media only screen and (min-width: 768px) {
  .sj-hero-quotes > *:nth-child(n+3) {
    display: block;
  }
}

/* Desktop: Show 6 testimonials */
@media only screen and (min-width: 1024px) {
  .sj-hero-quotes > *:nth-child(n+5) {
    display: block;
  }
}

Desktop-first approach

/* Desktop (default): Show 6 testimonials */
/* No media query needed for desktop-first */

/* Tablet: Hide testimonials 5 and above */
@media only screen and (max-width: 1023px) {
  .sj-hero-quotes > *:nth-child(n+5) {
    display: none;
  }
}

/* Mobile: Hide testimonials 3 and above */
@media only screen and (max-width: 767px) {
  .sj-hero-quotes > *:nth-child(n+3) {
    display: none;
  }
}

Understanding the CSS

Media queries

@media only screen and (max-width: 600px) targets screens smaller than 600px (typically mobile devices).

nth-child selector

:nth-child(n+4) selects the 4th child element and all subsequent elements. Combined with display: none, it hides these elements.

Widget selectors

Different widget types use different CSS classes. If you're unsure, use .senja-embed > * as a general selector.

Troubleshooting

CSS not working?

  • Make sure you're using the correct widget selector class

  • Try adding !important to force the style: display: none !important;

  • Check that your CSS is properly formatted and saved

  • Clear your browser cache and refresh the page

Wrong number of testimonials showing?

Adjust the nth-child number. For example:

  • To show 2 testimonials: :nth-child(n+3)

  • To show 3 testimonials: :nth-child(n+4)

  • To show 5 testimonials: :nth-child(n+6)

Need help identifying CSS classes?

Right-click on your widget, select "Inspect Element," and look for classes starting with sj- in the HTML structure.

Advanced examples

Different limits for multiple breakpoints

/* Show 1 testimonial on small mobile */
@media only screen and (max-width: 480px) {
  .sj-hero-quotes > *:nth-child(n+2) {
    display: none;
  }
}

/* Show 2 testimonials on large mobile */
@media only screen and (min-width: 481px) and (max-width: 767px) {
  .sj-hero-quotes > *:nth-child(n+3) {
    display: none;
  }
}

/* Show 4 testimonials on tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .sj-hero-quotes > *:nth-child(n+5) {
    display: none;
  }
}

/* Show all testimonials on desktop (1024px+) */

Fade effect instead of hiding

@media only screen and (max-width: 600px) {
  .sj-hero-quotes > *:nth-child(n+4) {
    opacity: 0.3;
    pointer-events: none;
  }
}

Learn more about customizing your Senja widgets:

For platform-specific embedding guides, check out our comprehensive list of website integration tutorials.

Was this helpful?
Was this helpful?