Layout question for Twitch.tv challenge

1

Hello,
I’m trying to get the streamer’s logo and the streamer’s username/channel closer together. I’ve tried playing around with the margins, which work to a degree, but make the page less responsive. Any suggestions?

Also, as one minimize the width of the browser, the logo gets smaller (seemingly disproportionately!). How can I get around this?

Thanks in advance!

2

Float is deprecated. Flexbox is your friend for all of these kinds of problems.

4

That’s correct, I’m using Bootstrap 3. The only place I’m using float is the label.

5

Learning how media queries work would solve both of your problems. This will let you adjust different properties as the screen changes size. It’s how bootstrap works under the hood. It’s pretty intuitive and you’ll get plenty of tutorials on it with a simple Google search.

You might also consider assigning different column values. For example, col-md-3/col-md-9 but also including col-sm-5/col-sm-7 and maybe col-xs-6/col-xs-6. I would play around with the values to see which one you like best. This simultaneously solves the problem of the user-logo getting too small - the reason why it gets so tiny is that it’s only 50% of its parent width, which gets smaller and smaller.

There are other solutions such as giving it a min-width or giving it a width that’s a mixture of fixed and responsive units using the calc property e.g. width: calc(30px + 30%) or whatever values work best. As mentioned earlier media queries would also help with this.

Some additional notes:

Should definitely change user-logo from IDs to classes. IDs are supposed to be unique - an element shouldn’t have two IDs and multiple elements aren’t supposed to share the same ID.

You could make your JS more manageable by combining two similar jQuery functions into one. jQuery can take in more than one selector. For example instead of

$(".all-users").append(...)
and
$(".on-users").append(...)
you can do
$(".all-users, .on-users").append(...);

This will cut down the amount of typing you have to do if you want to make changes to the HTML.

1 Like
6

Thank you so much! I will try your suggestions! And yes, you’re absolutely right, my JS is so long-winded I’ve been trying to figure out how to make them less heavy!

7

In Bootstrap 3 you can set to “pull-left”, “pull-center” and “pull-right” inside the div class.

I think it looks great.

1 Like