Before I begin, I must clarify that I do not specialize in front-end development and my expertise in UI/UX is limited.
With that said, here is my query:
I have a div containing p tags. I wish for this div to have a width: 700px when the browser window is at its maximum size. However, applying this property directly to the CSS of the div results in the text remaining static even when resizing the window. My goal is to have the text expand up to a certain point when the window is maximized and then shrink upon resizing, all without affecting a separate side-bar div.
To illustrate further, let me provide an example:
Maximized Browser Window:
Minimized Browser Window:
HTML
<!-- HOME -->
<div id="home" class="content">
<h2>Home</h2>
<p>AAAAAAAAAAAAAAAAAAA</p>
<p>BBBBBBBBBBBBBBBBBBBB</p>
</div>
CSS
.content {
padding-bottom: 30px;
position: absolute;
left: 280px;
right: 40px;
top: 0px;
}
.content h2 {
font-size: 110px;
color: #fff;
color: rgba(255,255,255,0.9);
padding: 10px 0 20px 0;
margin-top: 50px;
}
.content p {
color: black;
font-size: 16px;
line-height: 24px;
display: inline-block;
}