I have problem in positioning two elements below each other in Buefy-Vue. Currently it works, but if I resize website it breaks because name is set as static. How do I make this responsive? Thank you
Code:
<img style="margin-left: 20%;" class="mainLogo rotate" src="./assets/logo.svg" />
<h1 class="name first" >Name</h1>
<p class="undername second" >Text I want under name</p>
CSS:
.first{
width:12%;
height:100px;
position:absolute; //Due to this my page breaks if i resize it.
margin-left: 28%;
margin-top: 0.5%;
}
.second{
width:15%;
height:50px;
position: relative;
top: 65px;
margin-left: 0%;
}
Never put fixed height and width, that breaks your responsive design
put them in a div for using flex box
.flex__container {
display: flex;
flex-direction: column;
}
<div class="flex__container">
<h1 class="name first" >Name</h1>
<p class="undername second" >Text I want under name</p>
</div>
you can play with the font size and padding as you want.