Jump to content

Spotify embed size on Mobile version

Recommended Posts

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):

image.thumb.jpeg.41572638e30fd5755a679db720b6e362.jpeg

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!

Edited by tommmmusic
Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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:

image.thumb.png.c2be1b42cbdb3ed5087bd8bed5af45eb.png

Second playlist:

image.thumb.png.13ee1a4a0236ff11cd054c6344ae5591.png

Thanks!

Link to comment

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;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 10 months later...
On 12/6/2023 at 8:02 AM, oliviapalacios said:

@tuanphan is there also a way to uncurve the corners of the Spotify embed player? I would like them to be square.

If you share link to page where you use Spotify, I can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 12/15/2023 at 1:06 AM, oliviapalacios said:

@tuanphan Thank you!

Here is the page: https://jellyfish-gold-ysc4.squarespace.com/music/project-one-h346n-sbkja

PW: booch

Let me know if you can help!

Can you check it again?

image.png.f68b8b5cf096342dd68db1f1c31baa63.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 12/16/2023 at 11:11 AM, oliviapalacios said:

@tuanphan did you try refreshing the page? it's appearing for me right now.

I can't find a way to fix it, the element created round corner is in iframe tag, no way to control it.

image.thumb.png.17c143f3ab673a9fe135c1bdc46c1180.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.