CalvinEK Posted November 26, 2021 Share Posted November 26, 2021 Site URL: https://www.calvin.no/en-slags-grind/hunden I have embedded a Spotify player on this page: https://www.calvin.no/en-slags-grind/hunden When viewed on a mobile device (or in the mobile preview in Squarespace) the bottom part of the player is cut, like this: On a computer screen it looks like this: Is there a way that I can make the whole player show on mobile? Link to comment
Beyondspace Posted November 26, 2021 Share Posted November 26, 2021 4 hours ago, CalvinEK said: Site URL: https://www.calvin.no/en-slags-grind/hunden I have embedded a Spotify player on this page: https://www.calvin.no/en-slags-grind/hunden When viewed on a mobile device (or in the mobile preview in Squarespace) the bottom part of the player is cut, like this: On a computer screen it looks like this: Is there a way that I can make the whole player show on mobile? Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1637351429136_2825 .embed-block-wrapper iframe { height: unset; } #block-yui_3_17_2_1_1637351524693_2665 { margin-top: 30px; } } Let me know how it works on you site Press 👍 or mark this answer as solution to help another one too CalvinEK 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
CalvinEK Posted November 26, 2021 Author Share Posted November 26, 2021 17 minutes ago, bangank36 said: Try adding to Home > Design > Custom Css @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1637351429136_2825 .embed-block-wrapper iframe { height: unset; } #block-yui_3_17_2_1_1637351524693_2665 { margin-top: 30px; } } Let me know how it works on you site Press 👍 or mark this answer as solution to help another one too It works beautifully! Thank you very much! Beyondspace 1 Link to comment
CalvinEK Posted November 26, 2021 Author Share Posted November 26, 2021 @bangank36 I just published a new blog post with an embedded Spotify player playing a different track. The fix you provided works on the original blog post, but not on the new one: https://www.calvin.no/en-slags-grind/aronsen Any idea how I can make it work every time I embed a Spotify player? Link to comment
Beyondspace Posted November 26, 2021 Share Posted November 26, 2021 (edited) 1 hour ago, CalvinEK said: @bangank36 I just published a new blog post with an embedded Spotify player playing a different track. The fix you provided works on the original blog post, but not on the new one: https://www.calvin.no/en-slags-grind/aronsen Any idea how I can make it work every time I embed a Spotify player? Hi, I find that your block id has been changed. Kindly replace my previous code with the following one on your Custom Css @media only screen and (max-width: 767px) { /*change your id to apply change*/ #block-yui_3_17_2_1_1637960750049_2648 { .embed-block-wrapper { iframe { height: unset; } } + { div { margin-top: 30px; } } } } If you get this issue again, you can find the id and replace it on your own by using the extension: Squarespace ID Finder Here is how to use it: https://recordit.co/kUIH4uco0b Hope it can help you Edited November 26, 2021 by bangank36 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
CalvinEK Posted November 27, 2021 Author Share Posted November 27, 2021 9 hours ago, bangank36 said: Hi, I find that your block id has been changed. Kindly replace my previous code with the following one on your Custom Css @media only screen and (max-width: 767px) { /*change your id to apply change*/ #block-yui_3_17_2_1_1637960750049_2648 { .embed-block-wrapper { iframe { height: unset; } } + { div { margin-top: 30px; } } } } If you get this issue again, you can find the id and replace it on your own by using the extension: Squarespace ID Finder Here is how to use it: https://recordit.co/kUIH4uco0b Hope it can help you Thank you again. When I add this code, Squarespace says "Syntax Error on line 52" (the line with " + { "). So I didn't save it and don't know what would happen if I did. Thank you for the link to the plugin and the instruction video. I looked at the first blog and second blog post: https://www.calvin.no/en-slags-grind/hunden https://www.calvin.no/en-slags-grind/aronsen and found that their respective embedded Spotify players have different block ids. So if I replace the old block id with the new, the fix will (apparently) only work on the second blog post. And it will reoccur on the first blog post. Will I have to add more custom CSS every time I add embed a Spotify player in a blog post? Like this: @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1637960750049_2648 .embed-block-wrapper iframe { height: unset; } #block-08104326c4a328c45446 { margin-top: 30px; } } @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1637351429136_2825 .embed-block-wrapper iframe { height: unset; } #block-yui_3_17_2_1_1637351524693_2665 { margin-top: 30px; } } It seems to solve the problem. But it is laborious. Link to comment
Beyondspace Posted November 27, 2021 Share Posted November 27, 2021 (edited) 26 minutes ago, CalvinEK said: Thank you again. When I add this code, Squarespace says "Syntax Error on line 52" (the line with " + { "). So I didn't save it and don't know what would happen if I did. Thank you for the link to the plugin and the instruction video. I looked at the first blog and second blog post: https://www.calvin.no/en-slags-grind/hunden https://www.calvin.no/en-slags-grind/aronsen and found that their respective embedded Spotify players have different block ids. So if I replace the old block id with the new, the fix will (apparently) only work on the second blog post. And it will reoccur on the first blog post. Will I have to add more custom CSS every time I add embed a Spotify player in a blog post? Like this: @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1637960750049_2648 .embed-block-wrapper iframe { height: unset; } #block-08104326c4a328c45446 { margin-top: 30px; } } @media only screen and (max-width: 767px) { #block-yui_3_17_2_1_1637351429136_2825 .embed-block-wrapper iframe { height: unset; } #block-yui_3_17_2_1_1637351524693_2665 { margin-top: 30px; } } It seems to solve the problem. But it is laborious. It seems that we need to set style in general, not specific element. Kindly remove all my previous codes and add the following one @media only screen and (max-width: 767px) { .embed-block .embed-block-wrapper.embed-block-provider-Spotify > iframe { height: unset !important; } .embed-block + div { margin-top: 20px !important; } } Let me know how my new codes work on your site Hope it helps you Edited November 27, 2021 by bangank36 CalvinEK 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
CalvinEK Posted November 27, 2021 Author Share Posted November 27, 2021 7 hours ago, bangank36 said: It seems that we need to set style in general, not specific element. Kindly remove all my previous codes and add the following one @media only screen and (max-width: 767px) { .embed-block .embed-block-wrapper.embed-block-provider-Spotify > iframe { height: unset !important; } .embed-block + div { margin-top: 20px !important; } } Let me know how my new codes work on your site Hope it helps you Yes, this works. Thank you very much @bangank36! Beyondspace 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment