CODEWITHSUNDEEP
htmlcssresponsive-design
Lynob
Lynob

Reputation: 5327

Center logo in a min-width none responsive background

I had to set a min-width:1200px; on a background image to stop it from resizing. How to make the logo on top of it stay responsive? it should stay in the middle of the screen, not affected by the fact that the background is no longer responsive.

So the parent div of the logo shouldn't be responsive, while the logo should stay responsive. I can't use any CSS framework, it's a WordPress site

Upvotes: 1

Views: 195

Answers (2)

GibboK
GibboK

Reputation: 73908

Just use flex with justify-content: center to align the logo in the center of your header.

header {
  display: flex;
  justify-content: center;
  min-width:1200px;
  background:red;
  height:80px;
}

img {
    width: 50px;
    height:50px;
}
<header>
  <img src="http://via.placeholder.com/50x50">
</header>

or if you want your logo to be always in the center of your screen you could try

header {
  display: flex;
  justify-content: center;
  min-width: 1200px;
  background: red;
  height: 80px;
}

img {
  width: 50px;
  height: 50px;
}

.image {
  position: 'fixed';
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
<header>
  <div class="image">
<img src="http://via.placeholder.com/50x50">
  </div>

</header>

Upvotes: 0

Mihai T
Mihai T

Reputation: 17687

If you can't wrap the logo inside another container and it's direct parent has min-width:1200px, you could use position:fixed on the logo and position it centered on the page.

Without any other code from you, here's the solution

header {
  min-width:1200px;
  background:red;
  height:80px;
}
img {
  position:fixed;
  top:15px;
  left:50%;
  transform:translateX(-50%)
}
body {
  margin:0;
}
<header>
  <img src="http://via.placeholder.com/50x50">
</header>

Upvotes: 5

Related Questions