Skip to content
OverviewSolutions
16
Comments
5
Rafael Elias
@RafisElias

All comments

  • Vitor Henrique•60
    @Vitor-HenriqueASSubmitted over 2 years ago

    Minha maior dificuldade foi centralizar o conteúdo no meio da tela no momento de passar para o mobile (responsivo), que ficou o conteúdo colado no canto superior da tela.

    product-preview-card-component-main

    1
    Rafael Elias•290
    @RafisEliasPosted over 2 years ago

    Cara ficou muito bom, tenho algumas sugestões:

    I: na classe .container você pode remover o gap, e depois na classe .description no margin-left você coloca como 32px (se for fazer isso lembra de arrumar no media query)

    II: na tag <button> em vez de usar px (pixel) para o width, você pode colocar ele como 100%, ex:

    .btn-add-cart {
  ...
  /* width: 235px; <-- você pode remover esse */
  width: 100%; /* <-- adicione esse*/
  ...
}

    fazendo assim você não precisa se preocupar em ficar mudando o width do botão toda hora nos media query

    espero ter ajudado

    Marked as helpful
    1
  • Rafael Elias•290
    @RafisEliasPosted over 2 years ago

    hello Elena

    I: You don'n need hardcoded the width of the <span> inside of your <button>:

    span {
  ...
  width: 166px; /* <-- you can remove this */
  ...
}

    II: In the <h3>Cancel Order</h3> you can also remove the width:

    h3 {
  ...
  height: 20px; /*<-- you can remove this if you want */
  width: 108px; /*<-- you can remove this */
  text-align: center: /*<-- add this to align to the center */
  ...
}

    also in the :hover pseudo class you don't need rewrite your whole css just what you want change, the same applies to media queries

    III: Consider using this structure (it's your modified HTML code), I just move the <p class="change"> out of the <div class="section4-div">

    <div class="card-section4">
  <div class="section4-div">
    <div class="music"></div>
    <div class="prise">
      <p class="anual-plan">Annual Plan</p>
      <p class="anual-prise">$59.99/year</p>
    </div>
  </div>
  <p class="change">Change</p>
</div>

    in the `.card-section4``class:

    .card-section4 {
  ...
  height: 98px; /*<-- you can remove this (remember to remove this in the media query too) */
  width: 354px; /*<-- you can remove this (remember to remove this in the media query too) */
  justify-content: space-between; /*<-- change the center to space-between*/
  padding: 16px 20px; /*<-- add some space */
  ...
}

    in the .section4-divclass:

    .section4-div {
  ...
  height: 48px; /*<-- you can remove this (remember to remove this in the media query too) */
  width: 306px; /*<-- you can remove this (remember to remove this in the media query too) */
  ...
}

    in the .priseclass:

    .prise {
  ...
  height: 48px; /*<-- you can remove this (remember to remove this in the media query too) */
  width: 92px; /*<-- you can remove this (remember to remove this in the media query too) */
  margin-right: 94px;  /*<-- you can remove this (remember to remove this in the media query too) */
  ...
}

    in the .changeclass:

    .change {
  ...
  height: 19px; /*<-- you can remove this (remember to remove this in the media query too) */
  width: 52px; /*<-- you can remove this (remember to remove this in the media query too) */
  ...
}

    Normally is not good using hardcoded width and height so try avoid, i think will be good you learn about rem, em, vw, vh, etc.

    i hope this can help you.

    Marked as helpful
    0
  • Daniel Blum•170
    @dnlblumSubmitted over 2 years ago

    I'm having difficulties to align some elements:

    • Music Icon
    • Annual Plan Title
    • "Change" link.

    At first, I had all the elements horizontally aligned, but I wasn't able to float the "Change Link" to the right side. Made same changes in the CSS e HTML and ended up with this.

    Anyone could help me please?

    Order Summary Component

    2
    Rafael Elias•290
    @RafisEliasPosted over 2 years ago

    Amazing work man, to fix the alignment problem you can do somethings:

    I: in the <div id="neste"></div> add in the css the:

    ...
#neste {
  display: flex; /* <-- this will make the div alignment horizontally */
  align-items: center; /* <-- this will make the child elements alignment to the center of the div */
  gap: 16px; /* <-- this will add a spacing between the child elements */
}

    you can remove the margin-right of the Music Icon now you are using the gap

    II: In the .plan-info class you can add the align-items: center;

    III: You can also remove the margin of the <p> tag:

    ...
p {
  margin: 0
}

    i hope this can help you.

    Marked as helpful
    1
  • Rafael Elias•290
    @RafisEliasPosted over 2 years ago

    Amazing work man, I suggest you use in the class .ratingCard and .submitCard you can substitute the width to max-width ex:

      /* ...rest of the code */
.submitCard {
  ...
  /* use this: */
  max-width: 350px;
  /* instead this: */
  width: 350px;
}

    this will improve the responsivity of you card.

    And in the media query you can make some changes like:

    @media (max-width:650px) {
  body {
    ...
    height: 100%; /* <--- you can remove, this not permit the align-items: center works  */
  }
  .ratingCard {
    ...
    width: 100%; /* <--- you can remove, using the max-width this is unnecessary  */
    height: 100%; /* <--- you can remove, this is unnecessary  */
    ...
  }
}

    I hope this can help you

    Marked as helpful
    1
  • Rafael Elias•290
    @RafisEliasPosted over 2 years ago

    Vi que você é brasileira então vou escrever em português para facilitar para mim. vi que para fazer o accordion você usou as tags <h2> e <button> você poderia trocar eles pelas tags <label> e <input type='checkbox'> e usar a pseudo-classe :checked assim você mudaria o font-weight apenas para os que foram selecionados, outra coisa quando você for usar position: absolute sempre lembre de colocar o position:relative na classe pai para evitar que o componente sai voando para fora dele. No mais ficou tudo muito bom logo logo você vai estar voando, caso precise de mais alguma coisa é só perguntar.

    Feedback in english: I saw that to make the accordion you used the <h2> and <button> tags you could change them to the <label> and <input type='checkbox'> tags and use the :checked pseudo-class so you would change the font-weight just for the ones that were selected, another thing when you use position: absolute always remember to put the position:relative in the parent class to prevent the component from flying out of it. Otherwise everything was very good soon you will be flying, if you need anything else just ask.

    0