Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flex container ruining a border-radius, How to fix this?

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;
}
like image 520
Jayg713 Avatar asked Sep 10 '20 01:09

Jayg713


People also ask

How do you align a flex container?

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; .

How do you reverse a flex item?

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.

How do I align my Flex container to the right?

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.


2 Answers

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%;
}

enter image description here

like image 179
Ahmad Dalao Avatar answered Nov 15 '22 03:11

Ahmad Dalao


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>
like image 44
Tanner Dolby Avatar answered Nov 15 '22 04:11

Tanner Dolby