How can I embed Twitch into my collection without a scroll bar?

[GoLiveMerch]

I am trying to get Twitch video and chat on a collection but a scroll box comes up. Is there a way to increase the width of the collection description so the scroll bar does not come up? The link below shows what I have done so far. I use the Venture theme

https://golivemerch.com/collections/magilla

[StephensWorld]

Hey GoLiveMerch,

If you're using the embedded code generated by Twitch directly, then it's going to have set height & width parameters, per Twitch's policies (https://dev.twitch.tv/docs/embed/). 

You'd need to come up with a new set of coding (not generated by Twitch) to have it be fully responsive. Here are some blog posts which have steps for achieving this (though I have not tested them myself): 

https://philna.sh/blog/2020/03/23/responsive-twitch-embed/

https://www.smartdigitalsolutions.co.uk/embed-twitch-cam-responsive-full-width-fullscreen-website

Cheers,

Stephen

[GoLiveMerch]

This is where I grabbed my current code for it. I have it working, but the theme I have (or Shopify) puts a scroll bar there. If you click on the link provided in my first post you see the scroll bar. I just need that removed.

[StephensWorld]

The scroll bar is showing up because your iframe isn't responsive (meaning you're limiting the potential width of the box that it can show up in). 

So even if you removed the scroll bars, people would still need to scroll to the right in order to see the right-side of the chat section. 

You also have the iframe in line with the 'sort by' dropdown menu, rather than being in the description of the collection (or in a custom section, within a collection template). 

TLDR: it's not Shopify or your theme adding a scroll bar there -- it's that you haven't added the coding to the correct place within the theme, and/or you haven't included all of the coding necessary. 

Solution: you'll probably need to move where you have the coding, and then add some more CSS to make sure the iframe is responsive (ie. fills the space that you put it in).