Bootstrap dropdown adjustment - html

Question

I'm trying to adjust the glyphicon-user icon and btn-primary in dropdown to be displayed properly when the window is resized. However, when I resize the window, my button alignment seems to be out of the window where I can't view the end of the button. Answers anyone?
<div class="container-fluid">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<strong>User</strong>
</a>
<ul id="user-dp" class="dropdown-menu">
<li>
<div class="row">
<!-- Login -->
<div class="col-lg-4">
<p class="text-center">
<span class="glyphicon glyphicon-user icon-size"></span>
</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Test</strong></p>
<p class="text-left">
Testing
</p>
</div>
<div class="bottom text-center">
Test again
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
style.css
.icon-size
{
margin-top:5%;
font-size: 87px;
}
#user-dp{
min-width: 300px;
padding: 14px 14px 0;
overflow:hidden;
background-color:rgba(255,255,255,.8);
}
#user-dp .help-block{
font-size:12px
}
#user-dp .bottom{
background-color:rgba(255,255,255,.8);
border-top:1px solid #ddd;
clear:both;
padding:14px;
}

Answer 1

Jamdev's answer is close, but it's your #user-dp that sets the min-width. This will keep your box 300px wide no matter the window size. By adding the following CSS, you will reset the min-width to 0 whenever your window is under 768px wide.
#media (max-width: 768px) {
#user-dp {
min-width:0;
}
}
Demo: http://www.bootply.com/GetuidWvdM

Answer 2

add this code into your custom.css #media (max-width: 767px) .navbar-nav .open .dropdown-menu { min-width:0; }