On phone widths, you may want to add some CSS that puts a single player per row instead of two players per row. Then you’ll have more room for the player.
I concur with @crouchingbruin you should look at doing only one player. If you decide not to you can easily CSS that thing. Get rid of some of the controls and make it simplistic.
View post on imgur.com
I am a novice. I am asking for the css to simplify it. I cannot do one player, I need two. 🙂
Thank you Stef, but because of being a novice I have no idea what to do with that. I know how to apply CSS to my theme and my widget, but am not sure which part of what you provided needs to be added, plus it looks cut off. Thanks for trying to help me.
Oh, sorry I thought I read that you knew how to do CSS and that you were asking if it was possible. And indeed it is as you can see by my screenshot.
@crouchingbruin didn’t mean have one player. He was saying for you to stack your posts rather than side by side. Which for this is better user experience. Not side by side.
Here’s some CSS that you can try:
@media (max-width: 767px) {
.elementor
.elementor-element
> .elementor-widget-container {
margin: 0 !important;
}
.elementor
.elementor-element
> .elementor-widget-container
.wp-audio-shortcode {
width: 100% !important;
}
}
@media (max-width: 480px) {
.elementor .elementor-column.elementor-col-25 {
width: 100%;
}
}
The first media query (the one that’s active below 767px), removes a left margin that was pushing the player to the right by 40px and reducing the overall width of the player.
The second media query (the one that’s active below 480px) stacks the players in one column so the players look wider. 480px should cover the smaller cell phones, so you’ll still get two columns of players on tablets and larger cell phones, but you’ll get one column for smaller screen sizes. You can take that out if you want, or adjust the 480px to whatever size you want.
@crouchingbruin You are awesome! Thanks!
@serafinnyc how can I modify @crouchingbruin’s css to get a resulting smaller player like your screen shot? Thanks.
You can add this to either of the two media queries, depending upon when you want these controls to disappear:
.mejs-controls .mejs-duration-container,
.mejs-controls .mejs-volume-button,
.wp-audio-shortcode .mejs-controls a.mejs-horizontal-volume-slider {
display: none;
}
The first selector is for the time remaining, the second selector is for the mute button, and the third selector is for the volume level.
@crouchingbruin I cannot thank you enough for all your help.
