Fix: Moved breakpoint to medium from large (#169)

adaptlearning · May 12, 2023 · bf27877 · bf27877
1 parent 53c5724
commit bf27877
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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}