How to re-size raw html content for mobile

Home › Forums › Gillion Theme › How to re-size raw html content for mobile

Home › Forums › Gillion Theme › How to re-size raw html content for mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    NOT RESOLVED Posts

  • snowk
    Participant

    Hi there –

    I’m trying to embed the Apple Podcast Player into the podcast page on my site. All is good when I’m in desktop view, but when I switch to mobile, the html won’t fit the entire player on the screen. There is room for it, it’s just pushed to the side. Please advise how to fix.

    I used this embed code (from my Apple Podcast player site) and embedded into the raw html element:

    <iframe allow=”autoplay *; encrypted-media *; fullscreen *” frameborder=”0″ height=”450″ style=”width:100%;max-width:660px;overflow:hidden;background:transparent;” sandbox=”allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation” src=”https://embed.podcasts.apple.com/ca/podcast/sorry-im-sad/id1552926820″></iframe&gt;

    Attachments:
    You must be logged in to view attached files.

    Shufflehound Support
    Moderator

    Hi @snowk,

     

    I hope you are well today and thank you for your question.

     

    I visited your shared page and it displays fine for me as shown in the attached screenshot.

     

    Which browser are you using?

     

    Could you please try using a different browser?

     

    Best regards,
    Shufflehound team

    Attachments:
    You must be logged in to view attached files.

    snowk
    Participant

    Hi – This is the link I’m referring to. Please view it on a mobile device to see what I’m talking about.

     

    https://kelsiesnowwrites.com/sorry-im-sad/

    • This reply was modified 2 years, 7 months ago by snowk.

    Shufflehound Support
    Moderator

    This is happening because of the below CSS code that you have added on your website using the Yellow Pencil Editor.

     

    .vc_column-inner .wpb_wrapper .wpb_wrapper {
    position: relative;
    left: 164px;
}

     

    To resolve the issue, please remove the above CSS code from your website.

     

    You can reset the Yellow Pencil editor as described on the below pages.

     

    https://yellowpencil.waspthemes.com/docs/managing-changes-on-entire-website/
    https://yellowpencil.waspthemes.com/docs/managing-the-element-styles/

    snowk
    Participant

    I removed the CSS code and the issue is still there. Please advise. The mobile view still only shows an off centered portion of the podcast player, as you can see when you view this link on a mobile device.

     

    https://kelsiesnowwrites.com/sorry-im-sad/

     

    Shufflehound Support
    Moderator

    I can still see the code on your website so please remove it and also clear the cache If you are using any on your website.

     

    Also, you can test it by temporarily deactivating the Yellow Pencil Editor plugin.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)