I'm currently in the process of constructing my portfolio website. One element I am focusing on is ensuring that the Heading and paragraphs on my About page are centralized on the screen, with text wrapping when there is limited screen space for better responsiveness.
Initially, I had each line within its own Paragraph Tag to enhance readability, but this caused issues on mobile devices. To address this, I have opted to use "display: block" (CSS) on all Paragraph Tags, automatically adjusting the layout based on screen size.
However, I am encountering difficulties centering these paragraphs without them overlapping when using absolutecenter. How should I approach this issue?
Below is a simplified block of HTML for the Page, excluding the Nav Bar.
<div class="container mt-5 pt-5">
<div class="row">
<div class="col-md-12" id="introToCam">
<h1 id="centerHeading"> <b>About Me</b></h1>
<p class="mb-5 pb-5 mt-3">
Text About Me
</p>
<br><br>
<p class="mb-5 pb-5 mt-3">
More Text About Me
</p>
<br><br>
</div>
</div>
</div>
Here's the CSS styling for the Paragraph Tags:
p{
display: block;
max-width: 60%;
}