During my side project, I decided to use the angular material divider but encountered issues with aligning the text correctly.
https://i.stack.imgur.com/zg1mu.png
The problem can be seen in the image provided - the text on the right side is not aligned beside the vertical line as intended, instead it appears below both the vertical line and the text on the left side.
Here is a snippet of the HTML code:
<section class="about" id="about">
<div class="content">
<div class="titleContent">
<h2> Title Here </h2>
</div>
<mat-divider [vertical]="true"></mat-divider>
<div class="textContent">
<p> Lorem Ipsum placeholder text... </p>
</div>
</div>
And here is a snippet of the CSS code:
section{
padding: 30px 50px;
}
.about{
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
... (CSS code continues)
I attempted to resolve the alignment issue through Google Chrome modifications, but without much knowledge of front-end development, I was unsuccessful. Any assistance in resolving this issue would be greatly appreciated!