Responsive result summary component using CSS Grid and CSS Flexbox

Community feedback

• 

  Dilan M Jayawardena•180

  @iamdylanmjPosted about 1 year ago

  You have done a great job, I am also a newbie like your self, here is what I noticed from your code, you have tried to use svg images directly, it is alright but using image tag is better, because it is less complex unless you don't wanna change svg colors. The other things is, considering media queries min-width is suit for larger screens , assume you set min-width value as 700px, then the css rules only apply when the screen size equal to 700px or greater than 700px., and considering max-width, if you set max-width as 375px , the rules are gonna apply when the screen size is equal to 375px or less. So if you need to add specific screen size between two values like you tried to do in your media query the minimum value should be max-width:375px and maximum value should be min-width:1439, this will cause to apply css rules when the screen size between 375px and 1439px. I did my best to explain. overall you did a good job, please see how other people have completed the same challenge, you will have lot to learn. good luck.

  2

  ---

  

  Muhammad Faizan Soomro•60

  @Muhammad-Faizan-SoomroPosted about 1 year ago

  @iamdylanmj Thankyou so much it means a lot! I got your point. I will surely check out other solutions and try to learn a thing or two. Appreciated. :)

  0
• 

  mohammed-sarhad-ahmed•250

  @mohammed-sarhad-ahmedPosted about 1 year ago

  .reaction { margin-left: 30px; } .memory { margin-left: 30px; }

  .verbal {
      margin-left: 30px;
  }
  
  .visual {
      margin-left: 30px;
  }
  
  button {
      margin-left: 30px;
      padding: 8px;
  }
  

  Just create one class instead . .Margin-30{ margin-left:30} and add them to the HTML

  1

  ---

  

  Muhammad Faizan Soomro•60

  @Muhammad-Faizan-SoomroPosted about 1 year ago

  @mohammed-sarhad-ahmed got it! Thankyou so much! :)

  0