Issue
i have problems with the setup of the buttons. I’m unsure if i need a grid system or not?
I want it to look like this example:
No code yet as i am unsure of where to start, and what to start with.
If somebody can help then hanks in advanced!
Solution
You can use with flex, justify-content, align-items like example below:
.wrapped {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
}
.avatar {
width: 50px;
height: auto;
}
button {
width: 200px;
}
.div1 {
display: flex;
justify-content: center;
padding: 10px;
}
.div2 {
display: flex;
flex-direction: column;
padding: 10px;
}
.div2 button{
width: 200px;
margin: 6px;
padding: 5px;
}
.div3 {
display: flex;
padding: 10px;
margin-left: 0px;
align-items: center;
}
.div3 button {
width: 40px;
height: 30px;
margin-left: 160px;
}
.bell {
width: 30px;
padding: 10px;
flex-basis: 1000px;
}<section class="wrapped">
<div class="div1">
<button>At campus</button>
<img class="avatar" src="https://media.istockphoto.com/vectors/user-icon-flat-isolated-on-white-background-user-symbol-vector-vector-id1300845620?k=20&m=1300845620&s=612x612&w=0&h=f4XTZDAv7NPuZbG0habSpU0sNgECM0X7nbKzTUta3n8=" />
</div>
<div class="div2">
<button>Q & A</button>
<button>Klasser</button>
<button>Grupper</button>
<button>Chat</button>
</div>
<div class="div3">
<img class="bell" src="https://www.iconpacks.net/icons/1/free-bell-icon-860-thumb.png"/>
<button>Help</button>
</div>
</section>Answered By – VMT
Answer Checked By – Timothy Miller (AngularFixing Admin)