Trouble with embedded player's sizes on mobile

[Maciej_Orlowski]

hey guys,

trying to get those embedded players displaying correctly on mobile, but it doesn’t seem to work. It works just fine on desktop though.

scripts:

<script src='https://play.pod.co/bolesne-poranki-w-newonce-radio-1.js'></script>

or

<div class="podcastdotco-wrapper"><iframe data-target="bolesne-poranki-w-newonce-radio-1" src="https://play.pod.co/bolesne-poranki-w-newonce-radio-1" frameborder="0" width="100%" scrolling="no" style="overflow:hidden;max-width:750px;height:500px;" class="podcastdotco-player podcastdotco-player--podcast"></iframe><script src="https://play.pod.co/embed/frame-v1.js"></script></div>

I also tried to follow advice from this thread , but haven’t managed to deal with it on my end.

---

Here is my site Read-Only: LINK

[QA_Brandon (Brandon Mosco)]

Would you mind providing your share link here?

[miekwave (miek)]

You embed code uses podcastdotco-wrapper class. YOu can custom style it in a seperate div block.

Delete the following from embed code:
width="100%"
max-width:750px;height:500px

Apply the following settings on your STYLE Guide page and save. (click to see full image)

[Maciej_Orlowski]

thanks for the reply. It still doesn’t seem to be working on mobile - it’s too wide I reckon.

![PNG|281x500]

[Maciej_Orlowski]

sure!

https://preview.webflow.com/preview/newonce-radio?utm_medium=preview_link&utm_source=designer&utm_content=newonce-radio&preview=cca01f3306e8245c0c2147d2695fecb7&pageId=5d1df93384ad822795eb8dfd&mode=preview

[Maciej_Orlowski]

I applied those style setting both on desktop and mobile - desktop seems to be working just fine, but I cannot get it right on mobile

[rileyrichter (Ben Parker)]

Hi, @Maciej_Orlowski!!

Ben here with the Webflow Customer Support Team!

Thanks so much for posting this. I did some investigating and I was able to get this to work in a blank project. I used different code than what you have in your project You can see the preview link here:

https://preview.webflow.com/preview/webflow-podcasty?utm_medium=preview_link&utm_source=designer&utm_content=webflow-podcasty&preview=f227a35bc2005310a6bf4a3b580a7f73&mode=preview

And here’s the code I used in the embed:

<iframe data-target="bolesne-poranki-w-newonce-radio-1" src="https://play.pod.co/bolesne-poranki-w-newonce-radio-1" frameborder="0" width="100%" scrolling="no" style="overflow:hidden;max-width:750px;height:500px;" class="podcastdotco-player podcastdotco-player--podcast"></iframe>

Let me know if you have any other questions and I’ll be happy to assist you further!

[Maciej_Orlowski]

hi!

thanks for trying to help out. I’ve tried your code on a new page, but still couldn’t get it to work on mobile (screen). On preview it works just like yours, but ‘live’ it just doesn’t Below I provide both preview share link and live one, where you can see that it’s bugged on mobile.

preview link: Webflow - newonce.radio

live link: słuchaj live - newonce.radio

[Maciej_Orlowski]

@rileyrichter any ideas?

[rileyrichter (Ben Parker)]

Hi, @Maciej_Orlowski!

I took a look at your live site and it’s working great for me here:

https://newonce-radio.webflow.io/test-podcast-playera

Would you be able to use a tool like Cloud App to provide me with a short video about what you’re seeing?

[Maciej_Orlowski]

desktop works just fine, it’s mobile I have a problem with, here you have a video of my mobile screen: https://we.tl/t-d6zBDI9oO9

I also investigated this a little bit and I see that the problem appears when episodes have super long titles - is that possbile? I attach 2 examples