As a mid-level backend developer, I pride myself on being able to solve problems independently. However, there is something about the act of writing out my issue that always seems to lead me towards a solution. It's like the concept of "rubber-ducking" that has been talked about before.
Recently, I encountered an issue where my Bootstrap (always struggle with spelling that word), bootStrap, branded image was appearing huge and covering the entire screen.
Despite inspecting it in Chrome and searching for width and size-related styles, I couldn't find the culprit. I began unchecking various rules to see if anything changed, but the size remained the same!
<%= link_to( (image_tag "Hockey_Protege_A_white.png", alt: "brand"), root_path, class: "navbar-brand" ) %>
Update 1
After comparing the broken branch to a working one, I identified the CSS that was responsible. When I unchecked it, the image reverted back to its proper size.
.app-navbar .navbar-brand img {
width: 85px;
}