Jump to content

Audio player button bug after custom css

Recommended Posts

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



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!


Screenshot 2022-05-31 at 10.32.26.png

Link to comment
  • Replies 3
  • Views 358
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hey there,

try some position attributes
just add an extra line

something like

    position: relative;


    position: absolute;

This could work

add it below the radius


Bildschirmfoto 2022-05-31 um 13.49.06.png

Edited by ArminB

About Armin:
Squarespace Expert Profile: https://www.squarespace.com/designer/profile/3649084
Website: www.braunsberger-media.com
Leaders Lodge: See my Profile

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.