Okay
  Public Ticket #1715326
Audio player element positioning in mobile (max-width: 767px)
Closed

Comments

  • musicadi started the conversation
    September 17, 2018 at 6:34pm

    Hello,

    I am currently using the comingsoon.html on my website (renamed it to index.html)

    My problem is that on small devices (max-width: 767px), the positioning of the audio player elements is weird:

    - the play/pause button is "off"

    - playlist text and time aligning is weird, I think this should be have center text alignment, just like the info-album-player

    - under 359px width, the playlist/time is not showing

    Thank you for your help

    PS.

    If I add this to main.css, then the play/pause button is positioned correctly.

    @media (max-width: 767px) {.player-content {text-align:left}}


  •  850
    Jelly replied
    September 18, 2018 at 9:23am

    Hello,

    Please check our demo: https://tppr.me/H6mnM and https://tppr.me/zt7tq. As you can see it looks the same.

    If you would like to customize that please contact freelance developers that can implement this for you: https://studio.envato.com/ or upwork.com.

    - under 359px width, the playlist/time is not showing

    It's under 317px but the thing is that there are no device less than this size: https://tppr.me/ubLZ6

    Please check and let me know.

    Best Regards,
    Jelly Team

  • musicadi replied
    September 19, 2018 at 7:02am

    Hello and thank you for your quick reply!

    The play/pause button now looks the same because I added this to main.css

    @media (max-width: 767px) {.player-content {text-align:left}}

    With the original css, the button was floating to the right, covering the "next" button (at least in Safari 12.0 under macOS 10.13.6), while using the "responsive design" feature in Safari

    Kind regards,

    Adrian

  •  850
    Jelly replied
    September 19, 2018 at 4:24pm

    Really sorry about that. I am going to contact our developers about this issue.

    Best Regards,
    Jelly Team

  •  850
    Jelly replied
    September 21, 2018 at 10:35am

    Solution from our developers. You need to go to main.css line 2135 and add float:

    .player.horizontal .player-content {
      position: relative;
      float: left;
    }

    Best Regards,
    Jelly Team

  • musicadi replied
    September 21, 2018 at 3:22pm

    Great, thank you! Looks good now :)

    Kind regards


  •  850
    Jelly replied
    September 21, 2018 at 3:28pm

    Perfect!

    I am currently closing the ticket. Please don’t hesitate to submit a ticket whenever you need help. I will be happy to assist you.

    Best Regards,
    Jelly Team