htmlcssvue.jsbuefy

How to position one element under another Buefy navbar


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%;
}

Solution

  • 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.