Help with css/flexbox in Twitch.tv API

HTML-CSS
1

Hi,

I´m struggling with the challenge Twitch.tv API… I have three problems, which I can´t resolve:

  1. I can´t get the elements inside to be centered vertically (it can be seen when the
    "border" inside " a > * " elements is uncommented). How can I get all these to be centered vertically???
  2. When I make the window smaller (below approx. 700px), the horizontal scrollbar appears and I scroll to the right, the content (the
  3. ´s) overflow the background. Also, the left side of the
  4. element is not visible. How can I fix both of this?
  5. In the JS I add a class .online/offline in order to color the text “Online”/ “Offline” in green/red, but it doesn´t work. What´s the problem?

Project Link - https://codepen.io/mmajam/pen/NYgZjO/

Thanks for your advice and tips!!!

2

Hey) here are couple of thoughts: i believe you should stick to one style: pure flexbox or bootstrap(which uses flexbox too but you should apply bs classes to your elements
e.g remove bootstrap css and your elements will be centered vertically.
you have li{min-width:700px; } in ur css thats where horizontal scroll might come from
as for .online .offline classes they are addedto span with data.status and by the way its not about streaming, its about channel, so your info about streaming is not correct , check here https://dev.twitch.tv/docs/v5/reference/streams/#get-stream-by-user

3

Thank you very much!
You´re right - I didn´t realize that I mixed bootstrap with flexbox!
I don´t mind the scrollbar, but I don´t know how to prevent content overflowing the background. :frowning:
Oh, I´ll correct the data.status - thanks!

Thank you very much for your tips!!! :wink: