advice-generator-app basic sass-js async function

Community feedback

• 

  Hikmah•1,070

  @HikmahxPosted almost 2 years ago

  Hi Abork 👋. Nice work! I have some suggestions for you:

  • For the pattern divider svg when in mobile view, it's better to change the original width, width=250px, to the max-width instead. The reason is that in smaller devices the image overflows to the right. By changing the width to 100%, it makes sure it doesn't overflow, and adding a max-width property will make the width stop increasing on larger devices like tablets. Setting the margin to auto helps center the image when it reaches its max width.

  .mobile-img {
      width: 100%;
      max-width: 250px;
      margin: auto;
  }
  

  • For the main container, it is better instead of setting the width to 25% to give it a width and max-width property like the above. This way the container doesn't become stretched as the screen width increases.

  .main-container {
      width: 100%;
      max-width: 520px;
  }
  

  Hope this helps

  Marked as helpful

  0

  ---

  

  Abork•340

  @ayberkkkPosted almost 2 years ago

  Hi @Hikmahx 👋 , I have set the img tag as attr because in some versions of mobile safari, the device does not support the width and height properties given by CSS, thank you for your suggestions, I will take it into account.

  0

  

  Hikmah•1,070

  @HikmahxPosted almost 2 years ago

  @ayberkkk Okay

  0