diff --git a/src/layout/css/style.scss b/src/layout/css/style.scss
index b32277ac..2459fe5f 100644
--- a/src/layout/css/style.scss
+++ b/src/layout/css/style.scss
@@ -156,6 +156,9 @@ div.media {
   overflow: hidden;
   height: 200px;
 }
+.media-container--fullscreen {
+  grid-template-columns: 0px auto 0px;
+}
 .media-container__nav--right,
 .media-container__nav--left {
   text-align: center;
diff --git a/src/pytest_html/resources/style.css b/src/pytest_html/resources/style.css
index 5b99ebe4..e3772743 100644
--- a/src/pytest_html/resources/style.css
+++ b/src/pytest_html/resources/style.css
@@ -137,6 +137,10 @@ div.media {
   height: 200px;
 }
 
+.media-container--fullscreen {
+  grid-template-columns: 0px auto 0px;
+}
+
 .media-container__nav--right,
 .media-container__nav--left {
   text-align: center;
diff --git a/src/pytest_html/scripts/mediaviewer.js b/src/pytest_html/scripts/mediaviewer.js
index 789852c0..5bf3ad69 100644
--- a/src/pytest_html/scripts/mediaviewer.js
+++ b/src/pytest_html/scripts/mediaviewer.js
@@ -31,6 +31,7 @@ const setup = (resultBody, assets) => {
     }
 
     const mediaViewer = new MediaViewer(assets)
+    const container = resultBody.querySelector('.media-container')
     const leftArrow = resultBody.querySelector('.media-container__nav--left')
     const rightArrow = resultBody.querySelector('.media-container__nav--right')
     const mediaName = resultBody.querySelector('.media__name')
@@ -68,9 +69,12 @@ const setup = (resultBody, assets) => {
     const openImg = () => {
         window.open(mediaViewer.activeFile.path, '_blank')
     }
-
-    leftArrow.addEventListener('click', moveLeft)
-    rightArrow.addEventListener('click', doRight)
+    if (assets.length === 1) {
+        container.classList.add('media-container--fullscreen')
+    } else {
+        leftArrow.addEventListener('click', moveLeft)
+        rightArrow.addEventListener('click', doRight)
+    }
     imageEl.addEventListener('click', openImg)
 }