order summary whit css html

Community feedback

• 

  alec•775

  @AlecANLPosted almost 3 years ago

  Hola Thamara, de quedo genial no soy un experto, pero te puedo dejar algunas cosas que vi. No sé si lo notaste, pero en tamaños de 320 que creo es lo más pequeño, se desborda un poco, generado un scroll horizontal.

  Pienso que estás utilizando algunos margins que no son necesarios. Te dejo un ejemplo.

  Tienes esto

  <div class="box">
    <div class="child"></div>
    <div class="child"></div>
  </div>
  

  Para separarlo no es necesario que uses un margin, si en la clase box estás usando flexbox. En lugar de un margin utiliza gap.

  Otro caso que note es en tu clase .box puedes quitarle el margin, y el width quemado que le colocaste y puedes utilizar la propiedad: margin-inline: 10px por ejemplo y se lo va a aplicar en ambos lados (left, right).

  Puedes encapsular en otro div la imagen y .info en .box y vas a tener algo así

    <div class="box">
      <div class="box-child">
        <img src="./images/icon-music.svg"              alt="icon music">
      <div class="info-box">
        <h3>Annual Plan</h3>
        <span>$59.99/year</span>
      </div>
  
  </div>
        <a class="a-change" href="#">Change</a>
    </div>
  
  

  .box {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    align-items:center;
    margin-inline: 10px;
    outline: 1px solid red;
    padding-block: 8px;
  }
  
  .box > * {
    outline: 1px solid red;
  }
  
  h3 {
    margin: 0
  }
  
  .box-child {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  

  Espero te sirva. como te lo recuerdo no soy un experto, pero espero te pueda servir.

  0

  ---

  

  Thamara Ramos Deffitt•40

  @thamaraRDPosted almost 3 years ago

  @AlecANL Gracias por tu respuesta. La verdad es que la propiedad "gap" nunca la había escuchado en mi vida jeje. Averiguaré sobre ella. Y en cuanto a lo demás, gracias por tomarte el tiempo de darme feedback.

  0