• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty

adjust playlist font size on mobile

[Solved]

Foliovision › Forums › FV Player › How to … › adjust playlist font size on mobile

  • D.C. D. 1 year, 9 months ago

    I have put google search and ChatGPT through the wringer trying to figure this out. Nothing I do adjusts the size of video title in playlist on mobile.

    Current FV css:

    /* Common styles for .flowplayer */
    .flowplayer,
    .flowplayer .fp-player .fp-splash,
    .flowplayer video,
    .flowplayer iframe.fp-engine,
    .flowplayer .fp-ui,
    .flowplayer .fp-header,
    .flowplayer .fp-message,
    .flowplayer .fp-controls,
    .flowplayer.is-paused .fp-play svg,
    .fv-fp-tap-left,
    .fv-fp-tap-right,
    .flowplayer .embed-code-toggle,
    .flowplayer .fp-elapsed,
    .flowplayer .fp-duration,
    .flowplayer .fp-airplay,
    .flowplayer .fp-volumebar,
    .flowplayer .fp-volumebtn,
    .fv-fp-list,
    .flowplayer .fp-prev,
    .flowplayer .fp-next {
      border-radius: 1.4em !important;
      overflow: hidden !important;
    }
    
    /* Specific styles for .flowplayer .fp-header and .flowplayer .fp-message */
    .flowplayer .fp-header,
    .flowplayer .fp-message {
      border-radius: 1.4em 1.4em 0 0 !important;
    }
    
    /* Specific styles for .flowplayer .fp-controls */
    .flowplayer .fp-controls {
      border-radius: 0 0 1.4em 1.4em !important;
    }
    
    /* Adjusting the font size of playlist titles */
    .flowplayer .fp-playlist-external a .fp-playlist-text {
      font-size: 18px !important; /* Adjust the font size as needed */
    }
    
    /* Other styles */
    .flowplayer,
    .flowplayer video,
    .flowplayer .fp-engine,
    .fv-playlist-slider-wrapper {
      width: 90% !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    
    .fv-playlist-slider-wrapper {
      margin-top: -12px !important;
    }
    
    .flowplayer .fp-playlist-external a .fvp-playlist-thumb {
      position: relative !important;
      padding-bottom: 56.25% !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    
    .flowplayer .fp-playlist-external a .fvp-playlist-thumb img {
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: contain !important;
    }
    
    /* Hiding controls for splash mode with chapters or duration */
    .flowplayer.is-splash.have-chapters .fp-ui .fp-controls,
    .flowplayer.is-splash.have-duration .fp-ui .fp-controls {
      display: none;
    }
    
    /* Hiding background image for slim skin with chapters or duration */
    .flowplayer.skin-slim.have-chapters.is-splash .fp-player .fp-ui,
    .flowplayer.skin-slim.have-duration.is-splash .fp-player .fp-ui {
      background-image: none;
    }
    
    /* Media query for smaller screens */
    @media screen and (max-width: 1079px) {
      body .flowplayer,
      body .fv-playlist-slider-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
    
      .fp-playlist-text-wrapper .fp-playlist-external a h3 {
        font-size: 16px !important;
        text-align: center !important;
      }
    
      .flowplayer.is-mouseout .fp-ui,
      .flowplayer.is-mouseover .fp-ui {
        border-radius: 1em !important;
        overflow: hidden !important;
      }
    
      /* Adjusting the font size of playlist titles for smaller screens */
      .flowplayer .fp-playlist-external a .fp-playlist-text {
        font-size: 16px !important; /* Adjust the font size as needed */
      }
    }

    Sample page – view on mobile – see scroller video titles: https://dcdouglas.com/voice-over-male-talent-los-angeles/video-game-va/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Martin 2 years ago

    Hello D.C.,

    I added this to our CSS tweaks guide: Set font size to horizontal and slider playlist style

    Thanks,
    Martin

    D.C. D. 2 years ago

    Thank you!

Viewing 2 replies - 1 through 2 (of 2 total)
Reply To: adjust playlist font size on mobile



Please Sign in or Register to upload files.

Related Posts

  1. Is It Possible To Change The Font Size of The Player in Mobile View Using CSS?

    Is It Possible To Change The Font Size of The Player in Mobile View Using CSS?

  2. Foliopress WYSIWYG CSS for templates

    Foliopress WYSIWYG CSS for templates

  3. Playlist Styles

Primary Sidebar

How to …

    Categories

    • Business
    • Camera Reviews
    • Case Studies
    • Design
    • FV Player
    • Internet Marketing
    • IT
    • Life
    • SEO
    • Slovak
    • Video of the Week
    • WordPress

    Footer

    Our Plugins

    • FV WordPress Flowplayer
    • FV Thoughtful Comments
    • FV Simpler SEO
    • FV Antispam
    • FV Gravatar Cache
    • FV Testimonials

    Free Tools

    • Pandoc Online
    • Article spinner
    • WordPress Password Finder
    • Delete LinkedIn Account
    • Responsive Design Calculator
    Foliovision logo
    All materials © 2026 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
    • This Site Uses Cookies
    • Privacy Policy
    • Terms of Service
    • Site Map
    • Contact
    • Tel. ‭+421 2/5292 0086‬