Trying to tackle this issue, but feeling a bit lost. Whenever I resize the site below 1600px, everything breaks despite having media queries in place to handle the changes. One particular problem that's baffling me is related to a logo in an id that should be 175px in height and auto width. However, it consistently appears as 564px no matter the browser size. Take a look at the code below:
img #fpa-logo {
bottom: -25px;
height: 175px;
margin-left: 12.5%;
position: absolute;
width: auto;
}<div class="row">
<div class="col-sm-12 nav" id="nav-w-back">
<div class="col-sm-5 fLeft">
<a href="http://www.fpacny.com"><img src="../images/FPA-logo-new150-02.png" alt="FPA Logo" id="fpa-logo"></a>
</div>
<div class="col-sm-7">
<ul class="nav fRight" id="nav-ul">
<li><a href="#">Home</a></li>
<li><a href="#">Services<span style="font-size: .75em"> ▼</span></a>
<ul>
<li><a href="#">Personalized Care</a></li>
<li><a href="#">Health Care Services</a></li>
</ul>
</li>
<li><a href="#">Links<span style="font-size: .75em"> ▼</span></a>
<ul>
<li><a href="#">Patient Information and Forms</a></li>
<li><a href="#">Patient Friendly Sites</a></li>
</ul>
</li>
<li><a href="#">Staff Bios</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>If you want to dig deeper into the code, you can check out the test site: where you can experiment with different sizes and see the issue for yourself. It seems like adding an inline HTML style of:
style="height: auto; width: 100%;"
is the only way to properly resize the main image background. Otherwise, it also breaks.
Why isn't my linked CSS taking precedence here? This problem is new to me, and it's incredibly frustrating!
JSFiddle: https://jsfiddle.net/hjo8pLxe/