All comments

• 

  akrammanfouai• 80

  @akrammanfouai

  Submitted over 1 year ago

  (I didn't get to make the mobile version, If someone can help me I would be grateful.)

  

  Product preview card component

  1

  50

  

  Vidit Varshney• 120

  @viditvarshney

  Posted over 1 year ago

  Hi Akram,

  Congratulations on submitting the solution.

  For Mobile designs, You can use the media queries in CSS. This will help you to target specific screen sizes.

  You can refer to this solution for mobile design: Click Here

  User Prefers mobile-friendly websites more over desktop versions. Even the big tech players don't more focus on their websites. Ex. Facebook, Instagram.

  You can see their web versions, you feel there are so many empty spaces, errors, etc...

  Because 99% of traffic came from mobile users.

  Marked as helpful

  0
• 

  Kameer Hosein• 30

  @DarkGamer2

  Submitted over 1 year ago

  

  QR Code component using React and Typescript

  1

  20

  

  Vidit Varshney• 120

  @viditvarshney

  Posted over 1 year ago

  Hey Kameer!

  Congratulations on completing this challenge. For a better solution, I have some feedback on your solution.

  • Add the landmarks to your code.
  • give the image some border-radius.
  • Correcting the margins on the <p> tag

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Vidit Varshney• 120

  @viditvarshney

  Submitted over 1 year ago

  

  Results-summary-component-solution

  1

  20

  

  Vidit Varshney• 120

  @viditvarshney

  Posted over 1 year ago

  • Pls help me to design for mobile devices.

  -->I just messed it up.

  --> I'm using a media query but do not get the output as desired.

  --> TOP content of the div is not visible

  View Source Code

  ` @media (max-width: 900px) {

  html {
      display: block;
  }
  
  body {
      display: flex;
      flex-direction: column;
      margin: 0;
      padding: 0;
  }
  .outer-box {
      width: 500px;
      
      height:800px;
      
      position: absolute;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      
  }
  .sub-box {
      width: 400px;
      height: 800px;
      border-radius: 0;
      padding-bottom: 10px;
  }
  .result {
      
  }
  .summary {
      border-radius: 0;
  }
  

  } `

  0