Twitch App - Layout problems

1

Hey guys,

Got a few frustrating problems that I’m trying to work though and I need help.

Firstly, I have an unordered list in a div that holds all my list items. I’m using a flex-container scheme that I found online and it pushes overflowing list items onto new lines.

Questions:

  1. How do I make the background of the div that holds everything adjust it’s width to the contents inside it? I tried display: inline-block; but it wrecks the styling and doesn’t crop the div width. I also tried overflow: hidden; but it doesn’t do anything in my case. Display: inline; works, but it doesn’t show the last empty spaces (if there are to be any).

  2. After the above, how to i center the unordered list inside my main div. Currently it seems my channel-div is attached to a specific position and if the screen gets too smalls for 3 elements, it rearranged to 2, but does not recenter.

I’m probably missing a few concepts, been googling a while now and pretty stuck. I could make a simpler layout but I’d love to get this one working if possible. (it looks dope.)

Here’s my pen.

2

Try with width : 100% css rule for contents inside div, and for the latter text-align : center would center contents inside div. Good luck !

3

@DrDrei

I think you need to add Bootstrap CSS too. (https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css) on CodePen I see that you have added jQuery, jQuery UI and Bootstrap.js. For the Bootstrap to be fully functional in my experience, you also need their .css extension, especially if you use these container classes.

4

@dr.shreeman @mirkoacimovic

Thanks for the suggestions, unfortunately none seemed to work.

I finally found a solution using css queries. Idea came from the end of this article. Essentially you say if the width of the display is less than the specified max-width, you set a specific width you want the div to be. Works great! Check out the pen to see it in action :slight_smile: (hopefully its not broken if you do as I’m working on it atm)

5

@DrDrei

That’s awesome for you to find the solution and thank you for posting the link! Also, it might interest you to read up on a similar subject: Bootstrap Documentation on Media Queries. The dynamics between resizing of ‘window’, vs resizing of ‘div’ boxes and the resultant visual placement is fun. Best of luck!

1 Like