Resolved: Problem with css/sass in a box with multiples elements

Question:

im having a problem, i build this image:
box
as you can see its a box with 4 elements inside. Its looks fine but when i start to re-size the windows it become a mess. idk what proporty im doing wrong, but i gonna give you a .gif of what is happening
https://imgur.com/gallery/VZQAKFY
this is what becomes when i re-zice THIS IS THE MESS WHEN I RE-SIZE THE WINDOW this is my code:
html:

<div class="containerRebalance">
<div class= firstTittleRow1>
 <div class="iconwarning">
   <mat-icon  [ngStyle]="{'color':'#f06f0f'}">warning</mat-icon>
 </div>
<div class= secondTittleRow>
  <div class="textoWarning">
    Para enviar tu solicitud de modificación, es necesario
    que los porcentajes de participación por cada
    beneficiario sea mayor a cero y que la suma de las
    participaciones en cada prioridad sea igual al 100% 
  </div>
 </div>
 <div class="linetext">
 <div class="texto1">
  <p class="texto1">
    ¿Desea repartir en partes iguales el porcentaje
    de participación de la  {{prioridad}}?
  </p>
 </div>

   <div class="texto2">
    Yes
  </div>
  <div class="texto2">
   No
 </div>
 </div>
 </div>
 </div>

SASS

.texto1
  float: left
  margin-top: -1px
  margin-left: 12px
  font-size: 14px
  line-height: 21px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
.texto2
  font-size: 14px
  line-height: 21px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
  float: right
  padding-right: 55px

.iconwarning
  float: left
  padding-top: 24px

.firstTittleRow1
  padding-left: 10px
  height: 73px
  display: block

.linetext
  display: block

.textoWarning
  font-size: 14px
  line-height: 18px
  font-family: "Titillium Web", sans-serif
  font-weight: 400
  color: rgb(96, 110, 125)
  padding-top: 20px




.secondTittleRow
  display: flex
  padding-left: 10px
  height: 73px
.containerRebalance
    height: 113px
    background: #fdf6e9
    border: 1px solid #f9ce93
    color: #4d5966
    font-size: 0.75rem
    font-family: Roboto-Medium
    align-items: center
    padding: 0 0.9375rem
    line-height: 17px
    margin-top: 48px
    padding-bottom: 1px

How can i make to not look like that? and keep the order of that 4 elements inside, i dont mind if the buttoms go down but keep the order in the main square. ty very much

Answer:

Remove fixed heights from .containerRebalance, .secondTittleRow and .firstTittleRow1, and add display:flex to .containerRebalance

.containerRebalance
// height: 113px 'Remove This'
background: #fdf6e9
border: 1px solid #f9ce93
color: #4d5966
font-size: 0.75rem
font-family: Roboto-Medium
align-items: center
padding: 0 0.9375rem
line-height: 17px
margin-top: 48px
padding-bottom: 1px
display: flex

.firstTittleRow1
  padding-left: 10px
  // height: 73px 'Remove This'
  display: block

.secondTittleRow
  display: flex
  padding-left: 10px
  // height: 73px 'Remove This'

you can see it here

If you have better answer, please add a comment about this, thank you!

Resolved: Problem with css/sass in a box with multiples elements

Resolved: Why when i change manualy the url on my react page it ignores the .css file?

Resolved: navigate and redirect not redirecting to path in react router

Resolved: Time Complexity: Find the number of people who know a secret leetcode 2327

Leave A Reply