Getting soundcloud embed to adapt to mobile

  • Unknown's avatar
    danceflooreduk · Member ·

    Hi,

    I need to get my soundcloud playlist (which is embedded into my homepage) to reduce in height when on a mobile. How do I adjust my html coding (or CSS in the editor) to make the soundcloud playlist display differently when on a mobile compared to a desktop?

    I thought it would make sense to make the widths and heights of the playlist into percentages rather than fixed pixels, but I’m not sure how to get this working properly. Also, my soundcloud playlist is in a html table, with a video in the cell next to it so they are side by side. I have made the ratio 40% for the playlist and 60% for the video.

    Any help is greatly appreciated!

    Thanks,

    Sam

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    mikestraw · Member ·

    Hi, @hollyandthehotrods,

    Looking at your source on the SoundCloud widget, there’s a fixed height attribute (set to 319) on the <iframe> tag (I’m assuming that was copy/pasted from SoundCloud.) I used my inspector to change the height attribute to 100% and the widget started sizing dynamically.

    If you can edit that in the source, you should be able to fix it. Let me know if that does the trick for you.

  • Unknown's avatar
    mikestraw · Member ·

    Hi, @hollyandthehotrods,

    Looking at your source on the SoundCloud widget, there’s a fixed height attribute (set to 319) on the <iframe> tag (I’m assuming that was copy/pasted from SoundCloud.) I used my inspector to change the height attribute to 100% and the widget started sizing dynamically.

    If you can edit that in the source, you should be able to fix it. Let me know if that does the trick for you.

  • Unknown's avatar
    danceflooreduk · Member ·

    Hi, thanks for your reply.

    Although changing the height attribute to 100% made the width dynamic across all platforms, the height stays the same, so what happens is on a mobile it just looks long and thin. I ideally want the soundcloud widget and the video next to it to be the same height across all platforms. Would there be any way of achieving this?

    Thanks!

  • Unknown's avatar
    mikestraw · Member ·

    The video next to it is in an iframe, too. If you set the height/width of both iframes to percentages, they should dynamically size.

    Let me know how it works.

  • The topic ‘Getting soundcloud embed to adapt to mobile’ is closed to new replies.