Jon Holm Jon Holm - 2 months ago 6
CSS Question

CSS responsive - Lines under logo

I have some trouble with lines going under/behind my logo on smaller screens/mobile devices. There need to be x% of space between the lines and the logo, but when the screen gets smaller the line goes behind the logo. (You can try to change the width of the fiddle preview.)



header {
max-width: 100%;
height: 225px;
background-color: #000;
}
.logo {
position: relative;
top: -10px;
}
.line {
width: 100%;
height: 2px;
position: fixed;
top: 80px;
text-align: center;
}
.line span {
display: inline-block;
position: relative;
width: 50%;
}
.line span:before,
.line span:after {
content: "";
position: absolute;
height: 3px;
background-color: #FFF;
}
.line span:before {
right: 60%;
width: 80%;
margin-right: 5%;
}
.line span:after {
left: 60%;
width: 80%;
margin-left: 5%;
}

<header>
<div class="line">
<span>
<a href="#"><img class="logo" src="http://i.imgur.com/cPe20kT.png"></a>
</span>
</div>
</header>





View on fiddle

Note: The black background is just an example, the real background is NOT black.

Answer

Use a flexbox and things become a lot easier:

  1. Remove the absolute positioning of the before and after.

  2. Use display: flex instead of inline-block for .line span

    .line span {
      display: flex;
      justify-content:center;
      margin: 0 5%;
    }
    

    justity-content: center added to center it horizontally.

  3. Also added some margin to a and .line span- maybe you need to adjust it more?

header {
  max-width: 100%;
  height: 225px;
  background-color: #000;
}
.logo {
  position: relative;
  top: -10px;
}
.line {
  width: 100%;
  height: 2px;
  position: fixed;
  top: 80px;
  text-align: center;
}
.line span {
  display: flex;
  justify-content:center;
  margin: 0 5%;
}
a {
  margin: 0 10px;
}

.line span:before,
.line span:after {
  content: "";
  height: 3px;
  background-color: #FFF;
}
.line span:before {
  width: 80%;
  margin-right: 5%;
}
.line span:after {
  width: 80%;
  margin-left: 5%;
}
<header>
  <div class="line">
    <span>
          <a href="#"><img class="logo" src="http://i.imgur.com/cPe20kT.png"></a>
        </span>
  </div>
</header>