I have the positioning exactly how I want it, but the circle around the 58 is supposed to be a perfect circle, instead it's adjusting to the content in the container. How can I fix this problem?
Here is what it looks like https://i.stack.imgur.com/Tb75A.png Here is what I need it to look like https://i.stack.imgur.com/LgQFI.png
Here is the JSX
<div className="second-col-container">
<h2>Air Quality Index</h2>
<div className="mod-container">
<span className="index">58</span>
<div className="para-mod">
<span className="mod">Moderate</span>
<div>
Air quality is acceptable; however, for some pollutants there
may be a moderate health concern for a very small number of
people who are unusually sensitive to air pollution.
</div>
</div>
</div>
</div>
CSS
.second-col-container {
background-color: white;
width: 250px;
grid-area: air-index;
margin-top: 20px;
border-radius: 10px;
}
.second-col-container h2 {
margin-bottom: 20px;
margin-left: 10px;
}
.para-mod {
font-size: small;
width: 60%;
color: grey;
display: flex;
flex-direction: column;
margin-left: 10px;
}
.index {
margin: 5px 0 0 5px;
color: black;
font-size: xx-large;
border: 3px solid rgb(223, 217, 217);
border-left-color: rgb(255, 170, 11);
border-bottom-color: rgb(255, 170, 11);
padding: 15px;
border-radius: 100%;
}
.mod-container {
display: flex;
}
.mod {
font-size: large;
color: black;
}
To center the inner div element we will make the parent a flex container. By adding the display: flex; property we make the section element a flex container allowing us to adjust the layout of the div which is now a flex item. To center out item horizontally we use the justify-content: center; .
default flex-direction: row; The flexbox items are ordered the same way as the text direction, along the main axis. flex-direction: row-reverse; The flexbox items are ordered the opposite way as the text direction, along the main axis.
In simple words, flex-items now expand from right to left as shown in the given figure. When justify-content is set to “flex-end”, it instantly shifts all the flex-items to the end of the flex-container along the main-axis, i.e flex items get right aligned.
I would start by giving the circle a fixed height
and width
. Then giving it a border-radius of 50%
. and that would solve the first problem ( to make it into a perfect circle).
The second problem centering the text. Give the span a display: flex
then use align-items: center;
and justify-content: center;
and you are good to go.
.index {
margin: 5px 0 0 5px;
color: black;
height: 50px;
width: 50px;
position: relative;
align-items: center;
justify-content: center;
display: flex;
font-size: xx-large;
border: 3px solid rgb(223, 217, 217);
border-left-color: rgb(255, 170, 11);
border-bottom-color: rgb(255, 170, 11);
/* padding: 15px; */
border-radius: 50%;
}
With only display: flex
applied to the parent div .mod-container.
, your <span class="index">
element containing the 2 digit number is growing to fill the content of its parent container.
Next, I centered the .mod-container
flexbox content with justify-content: center
and aligned using align-items: flex-start
. This seems to match your desired image. (I can update class syntax to JSX if you need)
.second-col-container {
background-color: white;
width: 250px;
grid-area: air-index;
margin-top: 20px;
border-radius: 10px;
}
.second-col-container h2 {
margin-bottom: 20px;
margin-left: 10px;
}
.para-mod {
font-size: small;
color: grey;
display: flex;
flex-direction: column;
margin-left: 10px;
}
.index {
margin: 5px 0 0 5px;
color: black;
font-size: xx-large;
border-radius: 50%;
border: 3px solid rgb(223, 217, 217);
border-left-color: rgb(255, 170, 11);
border-bottom-color: rgb(255, 170, 11);
padding: 15px;
}
.mod-container {
display: flex;
justify-content: center;
align-items: flex-start;
}
<div class="second-col-container">
<h2>Air Quality Index</h2>
<div class="mod-container">
<span class="index">58</span>
<div class="para-mod">
<span class="mod">Moderate</span>
<div>
Air quality is acceptable; however, for some pollutants there
may be a moderate health concern for a very small number of
people who are unusually sensitive to air pollution.
</div>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With