I have a user profile dropdown menu. I have created a row and columns for user picture/initials, name and title. Here is my code.
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2">
<% if UserProfile.exists?(user_id: current_user.id) %>
<% if current_user.user_profile&.photo %>
<img class="avatar-circle user-profile" id='base64image' src="<%= current_user.user_profile.photo %>">
<% else %>
<div class="avatar-circle user-profile">
<span class="initials user-profile-initials"><%= current_user.initials %></span>
</div>
<% end %>
<% end %>
</div>
<div class="col-xs-* col-sm-* col-md-*">
<% if UserProfile.exists?(user_id: current_user.id) %>
<%= UserProfile.find_by(user_id: current_user.id).first_name %> <%= UserProfile.find_by(user_id: current_user.id).last_name %>
</br>
<small><%= UserProfile.find_by(user_id: current_user.id).title %></small>
<% else %>
<%= current_user.email %>
<% end %>
</div>
</div>
The issue is it looks proper on desktop but seems to stack up on mobile view. Any ideas how to tackle this? Images: Desktop view
