Tinker Theme + Klaviyo Review Carousel Widgets

Technical Q&A

Topic summary

A user switched from Dawn to the Tinker theme and encountered display issues with Klaviyo review carousel widgets on mobile—images appear disproportionately large. Klaviyo support indicated conflicting CSS styling is likely the cause.

A proposed solution involves:

  • Locating the Klaviyo widget in the Theme Editor
  • Using browser developer tools to inspect the widget on mobile
  • Adding mobile-specific CSS fixes to the theme’s CSS file (e.g., base.css)

The suggested CSS code snippet uses media queries to constrain widget and image dimensions on screens ≤768px wide, applying max-width: 100% and height: auto with !important flags to override existing styles.

The issue remains unresolved pending implementation and testing of the proposed fix.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Ive just switched to new AI theme Tinker, was previously using Dawn. The klaviyo featured review widgets on my Tinker homepage are displaying the carousel and images disproportionally large on mobile. I contacted Klaviyo and they said theres likely code styling overiding, can someone help identify issue and resolve conflicting code please

2

Hi,

Hope this will help

  • Go to Theme Editor, locate Klaviyo widget
  • Inspect widget on mobile using Chrome or browser tools
  • Open your CSS file (base.css or similar) and Paste mobile CSS fix at bottom

CSS example

/* ? Fix for Klaviyo Review Widget on Mobile */
@media screen and (max-width: 768px) {
  .klaviyo-widget,
  .klaviyo-widget * {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  .klaviyo-carousel img {
    width: 100% !important;
    height: auto !important;
  }

  .klaviyo-carousel {
    padding: 0 10px;
  }
}