I am trying to create a responsive column on the left side of the screen with a specific width and height. In this column, I want to include the user's picture on the top and their name and position right below the picture. Under this information, I plan to add some titles. However, when I try to insert the title block, it goes outside the designated column area! How can I solve this issue and make it responsive using Bootstrap?
<div class="block">
<div class="left-part">
<img src="assets/user.jpeg" alt="User Picture">
</div>
<div class="right-part">
<div class="user-name">user</div>
<div class="user-status">Operator</div>
</div>
<div class="titles">
<div class="title">
<i class="fas fa-check-circle"></i>
Title1
</div>
<div class="title">
<i class="fas fa-check-circle"></i>
Title2
</div>
<div class="title">
<i class="fas fa-check-circle"></i>
Title3
</div>
</div>
</div>
Here is the SCSS code snippet:
.block{
margin-top: 0%;
display: flex;
position: absolute;
width: 219px;
height: 599px;
left: 0px;
.left-part {
margin-top: 10px;
margin-right: 14px;
margin-left: 14px;
}
.left-part img {
width: 69 px;
height: 80px;
}
.right-part {
margin-top: 10px;
flex-grow: 1;
margin-right: 15px;
}
.user-name {
font-size: 18px;
font-weight: bold;
}
.user-status {
font-size: 18px;
margin-top: 5px;
}
.title {
display: flex;
align-items: center;
font-size: 14px;
margin-bottom: 5px;
i {
margin-right: 5px;
}
}
}
This is how I incorporate my component in the home page:
<div>
<app-side-bar></app-side-bar>
</div>