Why isn’t the pink .progress showing up inside the black .meter div?
Span tags are inline elements. You will need to make it a display:block element to have it show.
See here for a guide to display tags:
and here to understand span tags:
You see a shorter description of display property at:
https://www.w3schools.com/cssref/pr_class_display.asp
Specifically, this line:
inline Displays an element as an inline element (like <span>). Any height and width properties will have no effect
All elements have a default display value, and not all default to the same value. Span tags are default inline elements.
Span is not a block level element.
You need to either set Display on the span in your CSS or change it to a div.
Well, it is also empty, give it some padding.
.meter {
background-color: black;
border-radius: 25px;
height: 30px;
width: 100%;
position: relative;
}
#progress {
background-color: #FEBBDE;
border-radius: 25px;
padding: 15px;
position: absolute;
}
Ok, I realised what I was doing wrong, thanks.
How do I stop the pink progress bar going over the black meter? Increasing #meter’s width doesn’t help.
You need to account for the padding on progress, or use box-sizing: border-box and rework the CSS. The frame function might also not quite be working as intended.
Here is a working example:
Thanks. It’s done now, I just need to center it in the middle of the page.
display: flex;
align-items: center;
justify-content: center;
isn’t working, it turns my progress bar into a circle for some reason. Help?
I updated the pen, but really you just need to give it a width (you can also use the flex
short-hand or flex-basis
to control the flex item).