diff --git a/ui/src/mixins/responsiveness.js b/ui/src/mixins/responsiveness.js
index c383e2268..431c7317c 100644
--- a/ui/src/mixins/responsiveness.js
+++ b/ui/src/mixins/responsiveness.js
@@ -27,13 +27,23 @@ export default {
         countColumns () {
             let cols = 0
             if (this.page) {
-                const b = this.page.breakpoints
+                // set default breakpoints if none are defined
+                let b = this.page.breakpoints
+                if (!b || !Array.isArray(b) || b.length === 0) {
+                    b = [
+                        { name: 'Default', px: 0, cols: 3 },
+                        { name: 'Tablet', px: 576, cols: 6 },
+                        { name: 'Small Desktop', px: 768, cols: 9 },
+                        { name: 'Desktop', px: 1024, cols: 12 }
+                    ]
+                }
                 // ensure breakpoints are sorted in reverse order
                 const breakpoints = b.sort((a, b) => a.px - b.px)
 
                 breakpoints.forEach((bp) => {
                     if (window.innerWidth >= bp.px) {
-                        cols = bp.cols
+                        // ensure cols is a number
+                        cols = Number(bp.cols)
                     }
                 })
             }