Sonaar mp3 player plugin: CSS align center with 1100px width

[Matthias]

Hey there,

default width of the Sonaar mp3 player plugin is 100%. But it would be cool if the player get a width of 1100px and is positioned in center like the other website content. (Start the mp3 player by clicking on the cover)

This btw. is a woocommerce single product template made with Elementor Pro.

Following CSS style code does not work:

#sonaar-player {
width: 1100px !important;
max-width: 1100px !important;
align-items: center !important;
margin-left: 100px !important;
margin-right: 100px !important;
}

or

#sonaar-player {
width: 1100px !important;
max-width: 1100px !important;
align-items: center !important;
margin-left: 50% !important;
margin-right: 50% !important;
}

Any ideas or solutions would be so cool!

Many thanks!

[Tom]

Hi there,

Try adding this CSS:

#sonaar-player {
    left: 50%;
    transform: translate3d(-50%, 94px, 0);
}

#sonaar-player.enable {
    max-width: 1100px;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Matthias]

Oh my god, yes!!!

Thank you very much!

(with

!important

it does work fine, yeah!

Many, many thanks!

[Tom]

You’re very welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts