Spotify embed size on Mobile version

Just renewed my website for another year, only to find that the Mobile version has a big space whenever I embed a Spotify playlist; this looks awful and so unprofessional.

For a musician who depends on playlists, the majority of which are Spotify tunes, I need it to look good - at the moment, there is a huge empty space on my page under EVERY playlist (the yellow I added is the space I wish to remove):

Can someone pls advise how to remove this blank space, and how to change the code so that the playlist is not minimised to a window that you have to scroll on.

Thanks for your help!

Does anyone have any solutions to this? Many thanks! 

@tuanphan @creedon 

I noticed on @CalvinEKyour site, even on mobile version, you managed to embed a Spotify player with only a small gap (padding) under your playlist - could you share the code you used to get this to work? Many thanks! 

Can you share link to page in screenshot?

Sure! Page is: 

https://www.tommmatthews.com/projects/tv-drama
 

Many thanks!

On 1/19/2023 at 4:06 AM, tommmmusic said:

Sure! Page is: 

https://www.tommmatthews.com/projects/tv-drama
 

Many thanks!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1673746598493_19432 .embed-block-wrapper {
    padding-bottom: 30% !important;
}
}

Hey @tuanphan, thanks so much - that works great with one block (Spotify player), but if i try to apply that code as a list to the other Spotify playlists on the page, it doesn't work...

If you see how I've tried to add multiple, you'll see the effect it has on the page...

Question: How can I write a code for all 4 playlists on the page?

Many thanks!

Here is the code:

Quote

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1673746598493_19432, #block-5f5bf147cd3a23fd488f .embed-block-wrapper {
    padding-bottom: 25% !important;
}

The coding for the first playlist doesn't work (div#block-yui_3_17_2_1_1673746598493_19432) but the second does

First playlist:

Second playlist:

Thanks!

Hi,

It looks like you figured it out?

On 1/27/2023 at 1:56 AM, tuanphan said:

Hi,

It looks like you figured it out?

 

Hey Tuanphan, 

I basically copied the code and repeated it for each separate block.

I think no need to group them together, no difference right?

Thanks again!

Yes. Or you can combine them, something like this

@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1673746598493_19432 .embed-block-wrapper {
        padding-bottom:25% !important;
    }
div#block-5f5bf147cd3a23fd488f .embed-block-wrapper {
        padding-bottom:25% !important;
    }
div#block-61658798d199cd48c9e9 .embed-block-wrapper {
        padding-bottom:25% !important;
    }
div#block-yui_3_17_2_1_1651622547412_63949 .embed-block-wrapper {
        padding-bottom:25% !important;
    }
}