All comments

• 

  Brian Yeadon• 70

  @brianyeadon

  Submitted almost 2 years ago

  No real difficulties when building this project and overall a fun challenge.

  No specific questions but any feedback and suggestions on how I can improve are very welcome!

  Thank you!

  

  Responsive 3-column card: Mobile First, Flexbox, and Custom Properties

  1

  3

  0

  

  Pablo Montoya Varela• 300

  @PaliTriesToDesign

  Posted almost 2 years ago

  Hello! This solution looks great.

  I would just point out one small thing that I learned from Coder Coder on YouTube. On your section-body-text class you are using both top an bottom margins. According to Coder Coder, it would be better if you get used to adding either margin-top or margin-bottom to your elements but not both. From my pov, it is better adding margin-bottom to each element. i.e:

  .section-icon {
       margin-bottom: 2rem;
       ...
  }
  
  .section-heading {
       margin-bottom: 2rem;
       ...
  }
  
  .section-body-text {
       margin-bottom: 2rem;
       ...
  }
  

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  ibimina• 490

  @ibimina

  Submitted almost 2 years ago

  Kindly review if the best practice of code was used.

  Best Regards

  

  Responsive Tip calculator app using grid css & flexbox and javascript

  1

  4

  0

  

  Pablo Montoya Varela• 300

  @PaliTriesToDesign

  Posted almost 2 years ago

  Hello!

  For the desktop version it seems like there's an issue with the input icons. You can avoid using position: absolute as you can actually set a background image to the inputs:

  background-image: url(/images/icon-dollar.svg);
  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: 1rem;
  

  Hope this helps. c:

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Mawira• 70

  @RodgersX

  Submitted about 2 years ago

  • How do I align the button for both desktop and mobile view?

  

  Responsive card using pure css

  #vue#vuetify

  1

  2

  0

  

  Pablo Montoya Varela• 300

  @PaliTriesToDesign

  Posted about 2 years ago

  Hello!

  Try adding position: relative to your advice-card div. Then, you could adjust your refresh-btn with the bottom: property but most important (I think), try this with your right: or left: property: right: 50%; transform: translateX(50%);.

  This should center your button horizontally relative to your card.

  Marked as helpful

  1
• 

  riverCodes• 300

  @riverCodes

  Submitted about 2 years ago

  First time attempting a mobile-first workflow. Any feedback is appreciated, especially regarding the responsiveness of the page! Thanks.

  P.S. I know the design looks a bit off from the original, and I was wondering if that's only because of me not having access to the exact measurements and sizes, or am I actually doing something wrong?

  

  Responsive Stats Preview Card Component

  #accessibility

  1

  5

  0

  

  Pablo Montoya Varela• 300

  @PaliTriesToDesign

  Posted about 2 years ago

  Hello!

  Actually I think it looks pretty good. Congrats.

  On your .image-container media query you can reduce border-top-left-radius: 0; border-top-right-radius: 1rem; border-bottom-right-radius: 1rem; to border-radius: 0 1rem 1rem 0;

  Marked as helpful

  3

  This comment has received 1 replyShow
• 

  Bence Zámbó• 510

  @zambobence

  Submitted about 2 years ago

  I found it quite challenging to position the profile picture in the middle, at the end I have decided to position it absolutely. I am very interested if there are any more dynamic ways to position it.

  I could not figure out how to set the background of the body so I just used a gradient, although aI would really like to know the solution for that.

  

  Card Component Main using flexbox

  2

  3

  0

  

  Pablo Montoya Varela• 300

  @PaliTriesToDesign

  Posted about 2 years ago

  Hello!

  I faced the same challenge with the background images. After researching a little bit in google I found out that you can use more than one image as a background image. Something like this: background-image: url(/yourImage), url(/anotherImage); and then add properties to position correctly both images. I am not an expert but I hope it gives you just enough to find out the solution.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Rachael• 200

  @rachaelhrlm

  Submitted about 2 years ago

  Is there anything I can do better?

  

  QR Code component solution (React/TypeScript/Tailwind)

  #react#tailwind-css#typescript

  2

  6

  0

  

  Pablo Montoya Varela• 300

  @PaliTriesToDesign

  Posted about 2 years ago

  Congrats! I like your solution.

  I would add just one more thing: box-shadow to the card. Nothing important.

  c:

  Marked as helpful

  1

  This comment has received 1 replyShow