Audio player button bug after custom css

Site URL: https://www.philpaluch.com/

Hey,

was wondering if someone can help me with a little bug that seems to happen on my site after I used some custom css on my new portfolio page. It's still WIP but I want to reach out to more people with it, so any help would be greatly appreciated.

The play and stop button both appear when I visit my website in a separate tab. 

Please see the code below:
 

// header navigation
.header-nav-item  a:hover {
    color: #3164c4 !important;}
div.header-nav-item a {
    transition: all 0.5s !important;}

.header-title-text a:hover {
    color: #f8e9be !important;}
div.header-title-text a {
    transition: all 1s !important;}

.header-actions-action.header-actions-action--social a:hover svg {
    fill: #3164c4 !important;}
div.header-actions-action.header-actions-action--social svg {
    transition: all 0.5s !important;}

// footer navigation
footer.sections .html-block a:hover span {color: #3164c4 !important;
 transition: all 0.5s !important;}

// custom audio player
.sqs-widgets-audio-player { box-shadow: 2px 5px 15px rgba(0,0,0,0.2);background:linear-gradient(to right, #051338,#f8e9be,#fff)!important; 
 border-radius: 35px!important}
.sqs-widgets-audio-player .title-wrapper .title, .sqs-widgets-audio-player .artistName {color: #fff!important} 
.sqs-widgets-audio-player .time {color: #051338!important} 

.sqs-widgets-audio-player .action .play-button {border-left-color: #fff!important} 
.sqs-widgets-audio-player .action .pause {border-color: #fff!important}

// phone 
@media only screen and (max-width: 640px) { .sqs-block-image {
  width: 80%;
  margin: 0 auto;
  }}

@media only screen and (max-width: 640px) { footer.sections .sqs-block-image {
  width: 20%;
  margin: 0 auto;
  }}

Thanks so much!

Phil

Hey there,

try some position attributes
just add an extra line
https://www.w3schools.com/css/css_positioning.asp

something like

    position: relative;

or

    position: absolute;

This could work

add it below the radius

Hey @ArminB, just wanted to thank you!

It worked by putting it before border-radius: in order to maintain the rounded edges of the player. 

Cheers

Phil

I'm happy to help!