CODEWITHSUNDEEP
htmlcss
springathing
springathing

Reputation: 465

Mobile view affected by margins on paragraph tag

I set margin-left/right:300px; on a paragraph tag to push the edges of the containing header's background color to the text itself.

When I shrink the screen, the paragraph's background color eventually disappears, and the words move to the far right of the screen progressively until the words no longer exist.

Is there a better way to adjust the background color so it doesn't take up the entire allotted header space?

#educationhead p {
    color: orangered;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background: rgba(54, 25, 25, .75);
    margin-left:300px;
    margin-right:300px;
}
<header id="educationhead" class="section-header">
    <h2 class="section-title"><span>Education</span></h2>
    <div class="spacer"></div>
    <p id="edupara1" class="section-subtitle">Bla Bla Bla Text</p>
</header>

Upvotes: 0

Views: 179

Answers (1)

Jeramiah Harland
Jeramiah Harland

Reputation: 864

Using display: table; and margin: 0 auto on the p you can keep it centered. Other ways include setting text-align: center; on the parent or giving the p a specific width and doing margin: 0 auto;.

#educationhead p {
    color: orangered;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background: rgba(54, 25, 25, .75);
    display: table;
    width: auto;
    margin: 0 auto;
}
<header id="educationhead" class="section-header">
    <h2 class="section-title"><span>Education</span></h2>
    <div class="spacer"></div>
    <p id="edupara1" class="section-subtitle">Bla Bla Bla Text</p>
</header>

Upvotes: 1

Related Questions