Advice Generator App

Community feedback

• 

  Hikmah•1,070

  @HikmahxPosted over 1 year ago

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

  • For the image, pattern-divider.svg, not to overflow on smaller devices, it is better to add width and max-width property:

  .advice-text {
      img{
          width: 100%;
          max-width: 300px;
     }
  }
  

  By adding the width, it contracts and expands based on the screen size. Adding a max width will make it not expand way beyond the width you initially wanted. You can set the max-width above to whatever you want.

  • It is better to add padding to the advice-app class because as the screen gets smaller, the spacing at the side disappears:

  .advice-app {
      padding: 16px;
  }
  

  Hope this was helpful

  Marked as helpful

  0

  ---

  

  Petros Devrikis•380

  @PetrosdevriPosted over 1 year ago

  @Hikmahx Hello! I have tried out your advice and would like to share my thoughts.

  In terms of the 1st snippet, I wasn't sure how it impacted my image because I had set a media query width and it seems to work in small devices until I tried changing the device width to a higher value than 700px, which is great.

  As for your 2nd snippet, it helped a lot. I didn't know how padding would help the element as I thought it would overflow it, so this insight was quite vital.

  Overall, I appreciate your advice, and thus thanks a lot!

  0