pdf-container responsiveness

mediacms-io · Nov 11, 2024 · c737075 · c737075
1 parent 529e4e9
commit c737075
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/frontend/src/static/js/components/media-page/MediaPage.scss b/frontend/src/static/js/components/media-page/MediaPage.scss
@@ -551,14 +551,25 @@
 }
 
 .viewer-container .pdf-container {
-  width: 100%;
-  height: 900px;
   overflow-y: auto;
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%; // Default width for mobile
+  height: 400px; // Default height for mobile
+
+  @media (min-width: 768px) and (max-width: 1023px) { // Tablets
+    width: 90%;
+    height: 600px;
+  }
+
+  @media (min-width: 1024px) { // Desktop
+    width: 85%;
+    height: 900px;
+  }
 }
 
+
 .viewer-container .player-container.viewer-pdf-container,
 .viewer-container .player-container.viewer-attachment-container {
   background-color: var(--item-thumb-bg-color);