diff --git a/package.json b/package.json
index 2996e55..53535d7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "adapt-contrib-gmcq",
   "version": "7.3.8",
-  "framework": ">=5.19.1",
+  "framework": ">=5.31.2",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-gmcq",
   "bugs": "https://github.com/adaptlearning/adapt-contrib-gmcq/issues",
   "component": "gmcq",
diff --git a/templates/gmcq.jsx b/templates/gmcq.jsx
index f98789f..7d6d1cb 100644
--- a/templates/gmcq.jsx
+++ b/templates/gmcq.jsx
@@ -26,7 +26,7 @@ export default function Gmcq(props) {
     onItemBlur
   } = props;
 
-  const screenSize = device.screenSize;
+  const hasColumnLayout = device.isScreenSizeMin('medium');
 
   return (
     <div className='component__inner gmcq__inner'>
@@ -40,7 +40,7 @@ export default function Gmcq(props) {
           !_isEnabled && 'is-disabled',
           _isInteractionComplete && 'is-complete is-submitted show-user-answer',
           _isCorrect && 'is-correct',
-          _columns && screenSize === 'large' && 'has-column-layout'
+          _columns && hasColumnLayout && 'has-column-layout'
         ])}
         role={_isRadio ? 'radiogroup' : 'group'}
         aria-labelledby={ariaQuestion ? null : (displayTitle || body || instruction) && `${_id}-header`}
@@ -55,7 +55,7 @@ export default function Gmcq(props) {
               (_shouldShowMarking && _shouldBeSelected) ? 'is-correct' : null,
               (_shouldShowMarking && !_shouldBeSelected) ? 'is-incorrect' : null
             ])}
-            style={(_columns && screenSize === 'large') ?
+            style={(_columns && hasColumnLayout) ?
               { width: `${100 / _columns}%` } :
               null}
             key={_index}