Announcement

Collapse
No announcement yet.

Wordpress Audio File Width CSS help needed

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Wordpress Audio File Width CSS help needed

    Hello everyone, I'm new to CSS and Wordpress and I'm attempting to set a audio file width on an mp3 audio file that is spanning up-to 1180px automatically.

    How can I use the correct selector to Stop the auto width or correct it 200px instead of 1158px? This is the code I think I need to focus on & below it is the CSS I tried:
    Code:
    <div id="mep_0" class="mejs-container svg wp-audio-shortcode mejs-audio" tabindex="0" role="application" aria-label="Audio Player" style="width: 1158px; height: 30px;">
    CSS Tried:

    Code:
    #mep_0 .mejs-container {
    width: 200px;
    }


    Here is the information I got from FireFox Inspector:

    Copy: "CSS Selector" =
    Code:
    #mep_0

    Copy: "Outter html" =
    Code:
    <div id="mep_0" class="mejs-container svg wp-audio-shortcode mejs-audio" tabindex="0" role="application" aria-label="Audio Player" style="width: 1158px; height: 30px;"><div class="mejs-inner"><div class="mejs-mediaelement"><audio class="wp-audio-shortcode" id="audio-2951-1" preload="none" style="width: 100%; height: 100%;" src="http://www.ddc.com/wp-content/uploads/2016/09/Chris-Editted.mp3?_=1"><source type="audio/mpeg" src="http://www.ddc.com/wp-content/uploads/2016/09/Chris-Editted.mp3?_=1"><a href="http://www.ddc.com/wp-content/uploads/2016/09/Chris-Editted.mp3" class="customize-unpreviewable">http://www.ddc.com/wp-content/uploads/2016/09/Chris-Editted.mp3</a></audio></div><div class="mejs-layers"><div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;"></div></div><div class="mejs-controls"><div class="mejs-button mejs-playpause-button mejs-play" style=""><button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button></div><div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off" style=""><span class="mejs-currenttime">00:00</span></div><div class="mejs-time-rail" style="width: 1px;"><span class="mejs-time-total mejs-time-slider" style="width: 0px;"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded"></span><span class="mejs-time-current"></span><span class="mejs-time-handle"></span><span class="mejs-time-float" style="display: none;"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span></div><div class="mejs-time mejs-duration-container" style=""><span class="mejs-duration">00:00</span></div><div class="mejs-button mejs-volume-button mejs-mute" style=""><button type="button" aria-controls="mep_0" title="Mute" aria-label="Mute"></button></div><a href="javascript:void(0);" class="mejs-horizontal-volume-slider mejs-mute" style="display: table;" aria-label="volumeSlider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" aria-valuetext="80%" role="slider" tabindex="0"><span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs-horizontal-volume-total" style=""></div><div class="mejs-horizontal-volume-current" style="width: 40px;"></div><div class="mejs-horizontal-volume-handle" style="left: 27px;"></div></a></div><div class="mejs-clear"></div></div></div>
    Copy: "Inner html" =
    Code:
    <div class="mejs-inner"><div class="mejs-mediaelement"><audio class="wp-audio-shortcode" id="audio-2951-1" preload="none" style="width: 100%; height: 100%;" src="http://www.ddc.com/wp-content/uploads/2016/09/Chris-Editted.mp3?_=1"><source type="audio/mpeg" src="http://www.ddc.com/wp-content/uploads/2016/09/Chris-Editted.mp3?_=1"><a href="http://www.ddc.com/wp-content/uploads/2016/09/Chris-Editted.mp3" class="customize-unpreviewable">http://www.ddc.com/wp-content/uploads/2016/09/Chris-Editted.mp3</a></audio></div><div class="mejs-layers"><div class="mejs-poster mejs-layer" style="display: none; width: 100%; height: 100%;"></div></div><div class="mejs-controls"><div class="mejs-button mejs-playpause-button mejs-play" style=""><button type="button" aria-controls="mep_0" title="Play" aria-label="Play"></button></div><div class="mejs-time mejs-currenttime-container" role="timer" aria-live="off" style=""><span class="mejs-currenttime">00:00</span></div><div class="mejs-time-rail" style="width: 1px;"><span class="mejs-time-total mejs-time-slider" style="width: 0px;"><span class="mejs-time-buffering" style="display: none;"></span><span class="mejs-time-loaded"></span><span class="mejs-time-current"></span><span class="mejs-time-handle"></span><span class="mejs-time-float" style="display: none;"><span class="mejs-time-float-current">00:00</span><span class="mejs-time-float-corner"></span></span></span></div><div class="mejs-time mejs-duration-container" style=""><span class="mejs-duration">00:00</span></div><div class="mejs-button mejs-volume-button mejs-mute" style=""><button type="button" aria-controls="mep_0" title="Mute" aria-label="Mute"></button></div><a href="javascript:void(0);" class="mejs-horizontal-volume-slider mejs-mute" style="display: table;" aria-label="volumeSlider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="80" aria-valuetext="80%" role="slider" tabindex="0"><span class="mejs-offscreen">Use Up/Down Arrow keys to increase or decrease volume.</span><div class="mejs-horizontal-volume-total" style=""></div><div class="mejs-horizontal-volume-current" style="width: 40px;"></div><div class="mejs-horizontal-volume-handle" style="left: 27px;"></div></a></div><div class="mejs-clear"></div></div>

    THANK YOU!
    "I knew I shoulda taken that left turn at Albuquerque!"
    - Bugs Bunny

  • #2
    Dear Admin: Is there a better place for this question or is my layout not working for people?
    "I knew I shoulda taken that left turn at Albuquerque!"
    - Bugs Bunny

    Comment


    • KitchWitch
      KitchWitch commented
      Editing a comment
      Your layout looks fine. And web design seems the appropriate section for a question like this. Unfortunately, I can't force people to respond. Your comment brought it back to the newer posts, though, so hopefully that will bring you more views and possible responses.

Search

Collapse

Sponsor

Collapse

Incredible Stock

Latest Topics

Collapse

GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
Working...
X