Why do I have this and how can I remove it?
Probably your browser, cant see it on mine.
It’s because when the view is narrow, your body is not the full height of the view.
If you add background-repeat: no-repeat to the body it might be a bit more clear what is happening.
You can add a height to the html/body.
html, body {
height: 100%;
}
1 Like
I put the height only in html because in the body I didn’t see a difference.
Should I always define a height in HTML?
-
Setting it on the
bodylets you propagate the height down to other child elements. -
Setting a height is usually not a bad idea, but you may not always need it.
what do you mean with that? please add more details
As you notice, the text in the paragraph doesn’t end at the bottom but a little before the bottom. I want the text to fill this space —without adding extra text—.
One way to do that is to increase the line height with the right value to fill the box or increase the letter spacing or increase the font size or increae them all until it fills up the box
Hey there @Porphyrogennitos!
In your CodePen there is no red line, it’s only orange and red at the bottom, go ahead and click save on your edits so we can start helping! 
Best,
Cy499_Studios
Start with this maybe:
#img-caption {
background-color: rgba(var(--color-blue), 0.35);
/*
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
bottom: 3.3rem;
*/
font-size: 2rem;
font-weight: 700;
position: relative;
text-align: center;
}
And fix the image’s radius.
Yes because I added the red line in Snip & Sketch.
No, no. I want the #tribute-info’s background to end in the red line.
You didn’t try, that’s exactly what you’ll get. The extra orange appears because you’re tweaking the img caption.
What is the problem now?
If it’s the extra bit of orange, it’s just removing 1 padding.
If you want more room, but not orange, just add a margin on the last element.
If it’s something else, make it clear please.
I suggest you class that area that is use the HTML 5 semantic layout
then So you give the section a tag then input the style in your #id for section..As far as I am aware, vertically justifying text in pure CSS is impossible. That is, if you want to dynamically change the size of the text container element, or change the text content within, and have the texts react by always occupying the maximum vertical space, that is not possible in CSS.
However, if you have a text container with fixed size, with fixed amount of text content, then you can choose between the following CSS properties:
letter-spacing: increases space between each letter.
font-size: increases the size of the letters.
line-height: increases the space between each line of text.
All three properties above can take any of the size units you’ve learned about (e.g. px, em, rem)
line-height: specifically may be best here, and it is the amount of space a line of text occupies vertically, with the text itself centered vertically.
<style>
#example {
font-size:16px;
line-height:24px;
}
</style>
<p id="example">
example text
</p>
example text above would have (24px-16px)/2=4px space above and below it.
more on line-height at MDN, visual of what line-height is.