CODEWITHSUNDEEP
htmlcss
robotmayo
robotmayo

Reputation: 131

CSS created logo background become unaligned when browser resizes

I have recreated a logo using css. It is a fairly simple logo, a series of colored bars with a letter over it. The letter is within a span(to make it white) of an h1 tag. The logo is a ul with the li items acting as the boxes. I used z-index and position absolute to move it behind letter and works fine at my screens full width but becomes unaligned when browser gets smaller. I have tried setting the parent's position to relative but I still have the same problem.

I just realized the image is a bit incorrect. The logo background moves outside of the span/h1 not the parent div. The parent div has the full width of the screen.

Example

.logo-bg-box{
  display: inline;
  margin: 0;
  float: left;
  position: absolute;
  left: 10.8%;
  z-index: -1;
}

<div class="logo">
    <ul class="logo-bg-box">
    <li class="logo-bg-box1"></li>
    <li class="logo-bg-box2"></li>
    <li class="logo-bg-box3"></li>
    <li class="logo-bg-box4"></li>
    <li class="logo-bg-box5"></li>
    <li class="logo-bg-box6"></li>
  </ul>
  <h1 class="logo"><span class="logo">M</span>inimal</h1>
</div>

The parent div has no styling.

Upvotes: 0

Views: 117

Answers (2)

George
George

Reputation: 3943

When you use the percentage as a measurment tool, the style would say "make this content have 10.8% of the total window size from the left", so if the window width is 1000px, the position from left would be 10.8% of 1000px, hence would change whenever the window size changes. Use pixels px instead of percentage %, it would work just fine

Upvotes: 1

Pete
Pete

Reputation: 88

Have you tried adding the following CSS?

div.logo {
    position: relative;
}

Upvotes: 1

Related Questions