diff --git a/app/javascript/components/PlaylistRamp.jsx b/app/javascript/components/PlaylistRamp.jsx
index c74f1fb61d..8961e90699 100644
--- a/app/javascript/components/PlaylistRamp.jsx
+++ b/app/javascript/components/PlaylistRamp.jsx
@@ -50,6 +50,9 @@ const Ramp = ({
 
   let interval;
 
+  const USER_AGENT = window.navigator.userAgent;
+  const IS_MOBILE = (/Mobi/i).test(USER_AGENT);
+
   React.useEffect(() => {
     let url = `${base_url}/playlists/${playlist_id}/manifest.json`;
     setManifestUrl(url);
@@ -86,7 +89,7 @@ const Ramp = ({
           <Card className="ramp--playlist-accordion">
             <Card.Header>
               <h4>{activeItemTitle}</h4>
-              { activeItemSummary && <div>{activeItemSummary}</div> }
+              {activeItemSummary && <div>{activeItemSummary}</div>}
             </Card.Header>
             <Card.Body>
               <Accordion>
@@ -114,7 +117,7 @@ const Ramp = ({
             </Card.Body>
           </Card>
         </Col>
-        <Col sm={4} className="ramp--playlist-items-column">
+        <Col sm={4} className={`ramp--playlist-items-column ${IS_MOBILE ? 'mobile-view' : ''}`}>
           <Row>
             <Col sm={6}>
               <AutoAdvanceToggle />
diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
index 8c3d167ce0..ec5bc36853 100644
--- a/app/javascript/components/Ramp.scss
+++ b/app/javascript/components/Ramp.scss
@@ -356,4 +356,11 @@
       max-height: inherit;
     }
   }
+
+  /* CSS for playlist items column height in landscape mode for mobile devices */
+  @media(orientation: landscape) {
+    .ramp--playlist-items-column.mobile-view {
+      height: 109vh !important;
+    }
+  }
 }
\ No newline at end of file