Advice generator create with vite, react and typescript

Community feedback

• 

  Jeremiah Aworetan•90

  @jeremy0xPosted over 1 year ago

  Hi @stephenbliz!

  Excellent work on the challenge!

  Here's a suggestion that might help improve your code: instead of assigning a percentage width to your .wrapper element, you could set its width to 100% and establish a max-width value. This approach can help your design better accommodate different screen sizes, especially on mobile devices. Additionally, you may consider adding padding to the .section1 element to help improve the overall appearance.

  Keep up the good work!

  0

  ---

  

  stephenbliz•210

  @stephenblizPosted over 1 year ago

  @jeremiey Thank you for your feedback. But I have a question, will setting the max-width to 30% after initializing the width to 100% in the desktop view, makes it responsive to a width of 80% in the mobile view? If not, how can I achieve 80% width in the mobile view?

  0

  

  Jeremiah Aworetan•90

  @jeremy0xPosted over 1 year ago

  @stephenbliz,

  If I understand you correctly, a possible approach is to set the max-width of your element to a fixed value and add padding to create the desired spacing. Here's an example:

  .wrapper {
    width: 100%;
    max-width: 400px; /* Set a fixed maximum width */
    padding: 0 20px; /* Add padding for spacing on the left and right */
  }
  

  Let me know if you have any other question.

  0
• 

  Evans Gitahi•80

  @gitahievansPosted over 1 year ago

  Hi @stephenbliz. Would you want to remove the horizontal scrolling in the app? The cause might be setting the width in the body using 'vw' (width: 100vw) which causes the app to extend beyond the screen's width. You could try setting it to a percentage value (e.g width: 100%).

  0

  ---

  

  stephenbliz•210

  @stephenblizPosted over 1 year ago

  @gitahievans Thank you very much for your feedback. I will apply the correction you suggested.

  0