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
you can do
This will cut down the amount of typing you have to do if you want to make changes to the HTML.