CODEWITHSUNDEEP
htmlcssbootstrap-4
J A Pytlak
J A Pytlak

Reputation: 49

CSS not styling properly - will not work (bizarre)

I don't even know where to start on this one. When I resize below 1600px the site breaks 100% even though it has media queries in place to resize/hide/move elements. But to pinpoint one issue that eludes me, I have a logo in an id that is set to a height of 175px and width to auto. At any browser size it's always a height of 564px. Check out some 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"> &#9660;</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"> &#9660;</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're interested in more code - the test site is: http://fpacny.com/index_test.php where you can play with the sizing etc. At this point you would likely notice that the main image background only resizes properly when an inline HTML style addition of:

style="height: auto; width: 100%;"

is added. Otherwise, that breaks too.

Why won't my linked CSS override this? I've never had this issue on any website I've developed and it is driving me absolutely nuts!

JSFiddle: https://jsfiddle.net/hjo8pLxe/

Upvotes: 0

Views: 74

Answers (2)

IustiNN
IustiNN

Reputation: 42

Change your ccs to

img#fpa-logo {
  bottom: -25px;
  height: 175px;
  margin-left: 12.5%;
  position: absolute;
  width: auto;
}

Upvotes: 0

cloned
cloned

Reputation: 6742

You need to write 

img#fpa-logo

to target the logo.

Edit: Just saw you are using bootstrap 4: Why not use the "img-fluid" class on the image? Then it won't get too big and scale down automatically if the row/column gets smaller. 

<img class="img-fluid" {...} >

Or do you need any special behaviour, other than automatic resizing?

And you should also look more into the column features of bootstrap, you are using a lot of position: absolute in your css which is not needed at all for your design and would prevent a lot of errors if you would use bootstrap instead.

Upvotes: 3

Related Questions