Responsive page using flexbox and starting with mobile workflow first

Community feedback

• 

  hitmorecode•6,680

  @hitmorecodePosted about 1 year ago

  Good effort, I took a look at your page and I have a few suggestions

  • Avoid using % or vh for cards width and height. This will do more damage than good. For cards width and height use rem, em or px.
  • Your css is kind of all over the place, it was a bit hard for me to figure out what was wrong with it. When writing css try to go from top to bottom, just like you structure your html.

  I've made some changes in your css (see below)

  ## Lines with /**/ are the ones I modified
  ## Lines that are commented out can be removed
  
    body { /* right now you have it inside the media query, move it to here */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 100vh;
    }
  
  .container { /* this rule is new */
    width: 370px;
    height: auto;
  }
  
  .result-side {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-image: linear-gradient(var(--lightslateblue) .1%, var(--lightroyalblue));
  /*   height: 100%; */
    text-align: center;
    display: flex; /**/
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
  }
  
  #title {
    font-size: 1.063rem;
    font-weight: 600;
    color: var(--lightlavender);
  /*   padding: 22px; */
  }
  
  #total-score {
  /*   margin: auto; */
    color: var(--lightlavender);
    border-radius: 50%;
    width: 200px; /**/
    height: 200px;/**/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: linear-gradient(to bottom, var(--violetblue), var(--persianblue));
    margin: 20px 0; /**/
  }
  
  #great {
    font-size: 1.375rem;
    color: var(--white);
    font-weight: 700;
  /*   padding-top: 22px; */
  /*   padding-bottom: 10px; */
  }
  
  #comment {
    font-size: 0.938rem;
    color: var(--lightlavender);
    font-weight: 500;
  /*   padding: 0 50px 35px;   */
  }
  
  @media screen and (min-width: 650px) {
  /*   body {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 100vh;
    } */
    
    .container {
      display: flex;
      width: 610px; /**/
  /*     margin: 75px auto; */
      box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
      border-radius: 30px;
    }
  
    .result-side {
      border-radius: 35px;
      width: 110%;
    }
  
    #title {
      font-size: 1.375rem;
      font-weight: 600;
      padding: 30px;
    }
  
    #total-score {
      font-size: 1.25rem;
      font-weight: 600;
  /*     border-radius: 50%; */
  /*     max-width: 60%; */
  /*     min-height: 28vh; */
    }
  
    #yourscore {
      font-size: 5rem;
    }
  
    #outof {
      font-size: 1.063rem;
    }
  
    #great {
      font-size: 1.875rem;
      padding-top: 25px;
      padding-bottom: 15px;
    }
  
    #comment {
      font-size: 1.063rem;  
    }
  
    .summary-side {
      font-size: 1.375rem;
      padding: 30px 35px;
    }
  
    .summary-side ul {
      font-size: 1.125rem;
      margin-top: 25px;
    }
  
    .summary-side ul li {
      margin-bottom: 20px;
    }
  
    .continue-button {
      margin-top: 20px;
      padding: 18px;
      font-size: 1.063rem;
      border-radius: 40px;
    }
  }
  
  

  Marked as helpful

  1

  ---

  

  Kim•30

  @TKNsssPosted about 1 year ago

  @hitmorecode Thank you so much! I really appreciate that.

  0
• 

  Wally-Devking•20

  @Wally-DevkingPosted about 1 year ago

  Nice work;
  But I noticed that the Circle where you have the 76. Is more Oval than circle. That must be an error from your CSS sizing or border-radius.

  You can utilize the deign guide dimensions sent to you by Frontend Mentor.

  0

  ---

  

  Kim•30

  @TKNsssPosted about 1 year ago

  @Wally-Devking maybe I should add more @media to adjust the size in different screen sizes. Is that ok?

  1

  

  Wally-Devking•20

  @Wally-DevkingPosted about 1 year ago

  @TKNsss I think you can adjust the circle- using equal height and with ( height:50px; width: 50px; border- radius: 25px;)

  Or check up W3schools to see more examples

  0