--- title: Build a Horizontal Scrolling Card Row in HubSpot, No JavaScript Required description: A step-by-step pattern for a swipeable, horizontally scrolling card row in a HubSpot module using pure CSS - flexbox, overflow-x, styled scrollbars, and the cascade traps to avoid. image: https://fcpsolution.com/hubfs/Section_Previews/cards-scroll.jpg --- [Skip to content](https://fcpsolution.com/blog/build-a-horizontal-scrolling-card-row-in-hubspot-no-javascript-required#main-content) [![Peerless-h-3](https://fcpsolution.com/hs-fs/hubfs/Peerless-h-3.png?width=1024&height=274&name=Peerless-h-3.png "Peerless-h-3")](https://fcpsolution.com/) - [Contact](https://fcpsolution.com/contact) - [Careers](https://fcpsolution.com/careers) - [Terms](https://fcpsolution.com/terms) - [Privacy](https://fcpsolution.com/privacy) - [User Agreement](https://fcpsolution.com/license) This is a search field with an auto-suggest feature attached. - There are no suggestions because the search field is empty. - [Home](https://fcpsolution.com) - [Team](https://fcpsolution.com/team) - [About](https://fcpsolution.com/about) - [Templates](https://fcpsolution.com/template) - [Pricing](https://fcpsolution.com/pricing) - [Blog](https://fcpsolution.com/blog) - [Docs](https://fcpsolution.com/docs) [Home](https://fcpsolution.com/template/home) [About](https://fcpsolution.com/template/about) [Contact](https://fcpsolution.com/template/contact) [Meet the team](https://fcpsolution.com/team) [Landing Page](https://fcpsolution.com/template/landing-page) [Compare](https://fcpsolution.com/template/compare) [Pricing](https://fcpsolution.com/template/pricing) [Services](https://fcpsolution.com/template/services) [Theme Rates](https://fcpsolution.com/pricing/theme-rates) [Hourly Rates](https://fcpsolution.com/pricing/hourly-rates) [Services](https://fcpsolution.com/services) [Team](https://fcpsolution.com/team) [Product Updates](https://fcpsolution.com/blog#product-updates) - [What Makes Peerless Different](https://fcpsolution.com/blog/what-makes-peerless-different-from-other-hubspot-themes) - [New Pricing Table](https://fcpsolution.com/blog/a-new-pricing-table-module-built-for-side-by-side-comparison) - [Blog Feed Module v2](https://fcpsolution.com/blog/blog-feed-v2-tag-filtered-feeds-and-faster-cards) - [A Cleaner Mobile Experience](https://fcpsolution.com/blog/a-cleaner-mobile-menu-hamburger-fixes-across-the-theme) [Guides & Tutorials](https://fcpsolution.com/blog#guides-tutorials) - [Take control of styling Peerless blog content](https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts) - [Core Web Vitals on Hubspot CMS](https://fcpsolution.com/blog/how-to-pass-core-web-vitals-on-hubspot-cms) - [Getting Started With the Peerless Theme](https://fcpsolution.com/blog/getting-started-with-the-peerless-theme) - [Making HubSpot pages fast!](https://fcpsolution.com/blog/making-hubspot-pages-fast-a-practical-checklist) [Case Studies](https://fcpsolution.com/blog#case-studies) - [From Drupal to Hubspot](https://fcpsolution.com/blog/from-drupal-to-hubspot-rebuilding-paloaltou-edu-with-peerless) [Company News](https://fcpsolution.com/blog#company-news) - [Our Story](https://fcpsolution.com/blog/the-story-behind-fcp-solutions-and-peerless) - [A pleasant page editing experience with Peerless](https://fcpsolution.com/blog/why-peerless-modules-ship-with-zero-margins) - [Peerless Documentation](https://fcpsolution.com/blog/the-peerless-documentation-hub-is-live) [Marketing Tips](https://fcpsolution.com/blog#marketing-tips) - [The anatomy of a high-converting CTA](https://fcpsolution.com/blog/the-anatomy-of-a-high-converting-cta) - [Why your blog needs tag-based catergories](https://fcpsolution.com/blog/why-your-hubspot-blog-needs-tag-based-categories) - [Blog catergories into topics that rank](https://fcpsolution.com/blog/turn-your-blog-categories-into-topic-hubs-that-rank) [User Documentation](https://fcpsolution.com/docs) [QA](https://fcpsolution.com/docs/qa-test) [All Modules](https://fcpsolution.com/all-modules) [Styling Blogs](https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts) [Privacy](https://fcpsolution.com/privacy) [Home](https://fcpsolution.com/) › [Blog](https://fcpsolution.com/blog) › Build a Horizontal Scrolling Card Row in HubSpot, No JavaScript Required [HubSpot CMS](https://fcpsolution.com/blog/tag/hubspot-cms) Jul 22, 2025 # Build a Horizontal Scrolling Card Row in HubSpot, No JavaScript Required ![Kayron Macon](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) [Kayron Macon](https://fcpsolution.com/blog/author/kayron-macon) ![Preview of the Peerless horizontal scrolling cards section](https://fcpsolution.com/hs-fs/hubfs/Section_Previews/cards-scroll.jpg?length=1200&name=cards-scroll.jpg) A horizontally scrolling card row is one of the highest-value layouts on a marketing site: it shows six items in the space of three and works with a thumb-swipe on mobile. Here is the pure-CSS pattern we use in Peerless, and the two cascade traps that bite most implementations. ## The core pattern ``` .cards--scroll { display: flex; flex-wrap: nowrap; gap: 16px; overflow-x: auto; padding-bottom: 1rem; /* room for the scrollbar */ scrollbar-color: var(--primary-color) transparent; scrollbar-width: thin; } .cards--scroll .card { flex: 0 0 240px; /* fixed basis, no shrink */ } ``` Three things make it work: `flex-wrap: nowrap` keeps everything on one line, `flex: 0 0 240px` stops cards from shrinking to fit, and `overflow-x: auto` turns the overflow into a scroll instead of a blowout. ## Trap one: a base rule wins the cascade If your module also has a grid layout mode, `.cards { display: grid }` and `.cards--scroll { display: flex }` can tie on specificity — and then stylesheet order silently decides which one applies. Give the scroll variant a double-class selector (`.cards.cards--scroll`) so it outranks the base rule everywhere, always. ## Trap two: your mobile media query un-wraps it Most card grids carry a breakpoint rule like `flex-wrap: wrap` or `width: 100%` for small screens. That rule will happily stack your scroll row into a vertical list on exactly the devices where swiping matters most. Scope it: `.cards:not(.cards--scroll)`. ## Styling the scrollbar ``` .cards--scroll::-webkit-scrollbar { height: 8px; } .cards--scroll::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 4px; } ``` Pair the WebKit rules with `scrollbar-color` and `scrollbar-width` for Firefox, and the scrollbar becomes a design element instead of a gray afterthought. Want this as a drop-in module your editors can toggle per page? That is a [four-to-eight-hour build](https://fcpsolution.com/services/build-development). [HubSpot CMS](https://fcpsolution.com/blog/tag/hubspot-cms), [Guides & Tutorials](https://fcpsolution.com/blog/tag/guides-tutorials) ## About the Author Founder, Developer, Marketer of Sports Page. ## Comments Share this Page [![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/linkedin-in.svg)](https://www.linkedin.com/sharing/share-offsite/?url=https://fcpsolution.com/blog/build-a-horizontal-scrolling-card-row-in-hubspot-no-javascript-required) [![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/x-twitter.svg)](https://twitter.com/share?url=https://fcpsolution.com/blog/build-a-horizontal-scrolling-card-row-in-hubspot-no-javascript-required&text=Build%20a%20Horizontal%20Scrolling%20Card%20Row%20in%20HubSpot,%20No%20JavaScript%20Required%20-%20A%20step-by-step%20pattern%20for%20a%20swipeable,%20horizontally%20scrolling%20card%20row%20in%20a%20HubSpot%20module%20using%20pure%20CSS%20-%20flexbox,%20overflow-x,%20styled%20scrollbars,%20and%20the%20cascade%20traps%20to%20avoid.) [![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/facebook-f.svg)](https://www.facebook.com/sharer/sharer.php?u=https://fcpsolution.com/blog/build-a-horizontal-scrolling-card-row-in-hubspot-no-javascript-required%2F&title=Build%20a%20Horizontal%20Scrolling%20Card%20Row%20in%20HubSpot,%20No%20JavaScript%20Required&picture=&description=A%20step-by-step%20pattern%20for%20a%20swipeable,%20horizontally%20scrolling%20card%20row%20in%20a%20HubSpot%20module%20using%20pure%20CSS%20-%20flexbox,%20overflow-x,%20styled%20scrollbars,%20and%20the%20cascade%20traps%20to%20avoid.) ![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/copy.svg) Link copied! Print this page ![](https://fcpsolution.com/hubfs/raw_assets/public/src/images/icons/print.svg) ## Related Posts ### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 20, 2026 Four CSS Classes That Make Peerless Blog Posts Easier to Read Four utility classes already built into Peerless let you float images, caption them, and stack link lists, all from the… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/four-css-classes-for-better-blog-posts) ### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 12, 2026 What Makes Peerless Different From Other HubSpot Themes The specific architecture decisions -- no build step, zero-margin modules, ITCSS layering -- that separate Peerless… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/what-makes-peerless-different-from-other-hubspot-themes) ### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 12, 2026 The Story Behind FCP Solutions and Peerless Why FCP Solutions builds Peerless as its own base theme, and how the same theme now powers more than one production… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/the-story-behind-fcp-solutions-and-peerless) ### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 12, 2026 How to Pass Core Web Vitals on HubSpot CMS A practical checklist for hitting good Core Web Vitals scores on HubSpot CMS -- images, fonts, third-party scripts, and… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/how-to-pass-core-web-vitals-on-hubspot-cms) ### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 12, 2026 The Anatomy of a High-Converting CTA What separates a call-to-action that converts from one that gets scrolled past -- copy, contrast, and placement, broken… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/the-anatomy-of-a-high-converting-cta) ### [![](https://fcpsolution.com/hs-fs/hubfs/raw_assets/public/src/images/placeholders/image-coming-572.png?length=400&name=image-coming-572.png) July 8, 2026 Powering a Sports Portfolio: BuildingSportsPage on Peerless How we built sportspage.io as a child theme of Peerless: ten custom modules, everything else inherited, and one repo… ![](https://fcpsolution.com/hubfs/51e36cf3-1169-43d4-8a7e-13b7cfa596f8.jpeg) Kayron Macon](https://fcpsolution.com/blog/powering-a-sports-portfolio-building-sportspage-io-on-peerless) [![p-trail-2](https://fcpsolution.com/hs-fs/hubfs/p-trail-2.png?width=250&height=249&name=p-trail-2.png "p-trail-2")](https://fcpsolution.com/) ### Contact Us Primary Phone: [+1(860) 478-2023](tel:+18604782023) [WhatsApp](https://wa.me/18604782023) Email: [info@fcpsolution.com](mailto:info@fcpsolution.com) ### Company - [Home](https://fcpsolution.com/) - [About](https://fcpsolution.com/about) - [Team](https://fcpsolution.com/team) - [Pricing](https://fcpsolution.com/pricing) - [Contact](https://fcpsolution.com/contact) ### Explore - [Services](https://fcpsolution.com/services) - [Pricing](https://fcpsolution.com/pricing) - [Blog](https://fcpsolution.com/blog) - [Docs](https://fcpsolution.com/docs) - [Contact](https://fcpsolution.com/contact) Peerless is a HubSpot CMS theme built for clean design, fast deployment, and flexible content management. Crafted with semantic HTML, ITCSS, and HubSpot's drag-and-drop framework — no build step required. [Follow us on LinkedIn](https://www.linkedin.com) [Follow us on Instagram](https://www.instagram.com/peerless_hubspot) © For Client Peerless Solutions [Privacy Policy](https://fcpsolution.com/privacy) ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Kayron Macon", "url" : "https://fcpsolution.com/blog/author/kayron-macon" }, "dateModified" : "2026-07-22T16:29:21.162Z", "datePublished" : "2025-07-22T16:26:41.000Z", "headline" : "Build a Horizontal Scrolling Card Row in HubSpot, No JavaScript Required", "image" : [ "https://fcpsolution.com/hubfs/Section_Previews/cards-scroll.jpg" ], "mainEntityOfPage" : { "@id" : "https://fcpsolution.com/blog/build-a-horizontal-scrolling-card-row-in-hubspot-no-javascript-required", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://fcpsolution.com/hubfs/Peerless-h.jpg" } } } ```