diff --git a/assets/src/js/v3/entries/course-builder/components/modals/QuestionPreviewModal.tsx b/assets/src/js/v3/entries/course-builder/components/modals/QuestionPreviewModal.tsx
index 946a5444e6..16a600b2bd 100644
--- a/assets/src/js/v3/entries/course-builder/components/modals/QuestionPreviewModal.tsx
+++ b/assets/src/js/v3/entries/course-builder/components/modals/QuestionPreviewModal.tsx
@@ -377,6 +377,48 @@ const getPreviewFrameStyles = () => `
   [data-question=fill_in_the_blank] .tutor-quiz-question-input {
     box-shadow: none;
   }
+
+  body[data-preview-device='mobile'] .tutor-draw-image-question .tutor-draw-image-wrapper,
+  body[data-preview-device='mobile'] .tutor-draw-image-question .tutor-draw-image-reference-inner,
+  body[data-preview-device='mobile'] .tutor-pin-image-question .tutor-pin-image-wrapper,
+  body[data-preview-device='mobile'] .tutor-pin-image-question .tutor-pin-image-reference-inner {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+  }
+
+  body[data-preview-device='mobile'] .tutor-draw-image-question .tutor-draw-image-wrapper > img,
+  body[data-preview-device='mobile'] .tutor-draw-image-question .tutor-draw-image-reference-bg,
+  body[data-preview-device='mobile'] .tutor-pin-image-question .tutor-pin-image-wrapper > img,
+  body[data-preview-device='mobile'] .tutor-pin-image-question .tutor-pin-image-reference-bg {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+  }
+
+  body[data-preview-device='mobile'] .tutor-draw-image-question .tutor-draw-image-canvas {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Keep draw/pin previews fully visible inside modal viewport. */
+  .tutor-quiz-question[data-question='draw_image'] .tutor-draw-image-wrapper,
+  .tutor-quiz-question[data-question='draw_image'] .tutor-draw-image-reference-inner,
+  .tutor-quiz-question[data-question='pin_image'] .tutor-pin-image-wrapper,
+  .tutor-quiz-question[data-question='pin_image'] .tutor-pin-image-reference-inner {
+    height: auto;
+    max-height: min(52vh, 460px);
+  }
+
+  .tutor-quiz-question[data-question='draw_image'] .tutor-draw-image-wrapper > img,
+  .tutor-quiz-question[data-question='draw_image'] .tutor-draw-image-reference-bg,
+  .tutor-quiz-question[data-question='pin_image'] .tutor-pin-image-wrapper > img,
+  .tutor-quiz-question[data-question='pin_image'] .tutor-pin-image-reference-bg {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: min(52vh, 460px);
+  }
 `;
 
 export default QuestionPreviewModal;
diff --git a/assets/src/js/v3/shared/components/fields/quiz/questions/FormDrawImage.tsx b/assets/src/js/v3/shared/components/fields/quiz/questions/FormDrawImage.tsx
index 55f0e0009f..2c4302d900 100644
--- a/assets/src/js/v3/shared/components/fields/quiz/questions/FormDrawImage.tsx
+++ b/assets/src/js/v3/shared/components/fields/quiz/questions/FormDrawImage.tsx
@@ -582,11 +582,19 @@ const styles = {
     height: auto;
     border-radius: ${borderRadius.card};
 
+    ${Breakpoint.smallMobile} {
+      width: 100%;
+    }
+
     img {
       width: auto;
       max-width: 100%;
       height: auto;
       object-fit: initial;
+
+      ${Breakpoint.smallMobile} {
+        width: 100%;
+      }
     }
   `,
   answerHeader: css`
@@ -617,13 +625,24 @@ const styles = {
   canvasInner: css`
     position: relative;
     display: inline-block;
+    max-width: 100%;
     border-radius: ${borderRadius.card};
     overflow: hidden;
 
+    ${Breakpoint.smallMobile} {
+      display: block;
+      width: 100%;
+    }
+
     img {
       display: block;
+      width: auto;
       max-width: 100%;
       height: auto;
+
+      ${Breakpoint.smallMobile} {
+        width: 100%;
+      }
     }
   `,
   image: css`
diff --git a/assets/src/js/v3/shared/components/fields/quiz/questions/FormPinImage.tsx b/assets/src/js/v3/shared/components/fields/quiz/questions/FormPinImage.tsx
index ce222d2de5..0192792390 100644
--- a/assets/src/js/v3/shared/components/fields/quiz/questions/FormPinImage.tsx
+++ b/assets/src/js/v3/shared/components/fields/quiz/questions/FormPinImage.tsx
@@ -585,11 +585,19 @@ const styles = {
     height: auto;
     border-radius: ${borderRadius.card};
 
+    ${Breakpoint.smallMobile} {
+      width: 100%;
+    }
+
     img {
       width: auto;
       max-width: 100%;
       height: auto;
       object-fit: initial;
+
+      ${Breakpoint.smallMobile} {
+        width: 100%;
+      }
     }
   `,
   answerHeader: css`
@@ -613,13 +621,24 @@ const styles = {
   canvasInner: css`
     position: relative;
     display: inline-block;
+    max-width: 100%;
     border-radius: ${borderRadius.card};
     overflow: hidden;
 
+    ${Breakpoint.smallMobile} {
+      display: block;
+      width: 100%;
+    }
+
     img {
       display: block;
+      width: auto;
       max-width: 100%;
       height: auto;
+
+      ${Breakpoint.smallMobile} {
+        width: 100%;
+      }
     }
   `,
   image: css`