How can I do a responsive absolute positioning? - html

Question

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 class="banner">
<img src="https://picsum.photos/1200/300">
<div class="banner-buttons">
<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?

Answer 1

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 class="banner">
<div class="banner-buttons">
<button>Assistir</button>
<button>Mais Informações</button>
</div>
</div>

Answer 2

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.