How can I do a responsive absolute positioning?-CodePudding

I'm trying to create a banner that has two buttons on it:

.banner {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: -4%;
}

.banner img {
  width: 100%;
  /*image is 1232x317 by default and defines the size of the banner*/
}

.banner-buttons {
  display: flex;
  flex-direction: row;
  margin-left: 6.2%;
  position: absolute;
  top: 10%;
}

.banner button {
  display: flex;
  font-size: 200%;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  align-items: center;
  padding: 5px 15px;
}

<div >
  <img src="https://picsum.photos/1200/300">
  <div >
    <button>Assistir</button>
    <button>Mais Informações</button>
  </div>
</div>

but the problem is, the height of the buttons change based on the viewport, destroying the banner, how can I position it without ruining it?

CodePudding user response：

I would personally avoid absolute positioning and use background image to create the layers.

You can set a min height on your banner if you desire.

I would also use em and media queries to reduce the font size when the screen resolution is smaller.

.banner {
  background:url(https://picsum.photos/1200/300);
  padding:10px;  
}

.banner-buttons {
  display: flex;
  justify-content:center;
  align-items: center;
}

.banner button {
  font-size: 2em;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  padding: 5px 15px;
  margin:5px;
}

<div >
  <div >
    <button>Assistir</button>
    <button>Mais Informações</button>
  </div>
</div>

CodePudding user response：

Actually what solved for me was adding position: relative to .banner, now the buttons are displayed at the exact same position at every screen size.