All comments

• 

  David Gichuru•360

  @dxiDavidSubmitted almost 2 years ago

  How accurate was I compared to the design? Is there any issue you see with the way I used flexbox?

  

  Product preview card component challenge Using CSS Flexbox

  2

  30
  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hey there!👋 Good job on finishing the challenge .

  Here are some tips to improve your code:

  • Your component should be wrapped with main element.

  • And for other elements like headings and paragraphs, there is no need to wrap them around div.

  • You can use picture and source for you image, which doesn't need a media query in CSS for changing images. More info on MDN.

  • For accessibility reasons, the img alt text shouldn't be empty. It should describe the image.

  • You might wanna add to the media query's viewport since there are many phones with viewports larger than 375px, therefore the flex-direction doesn't change to column and the component won't look good on phones with bigger screens.

  If you need further clarification l, I would be happy to help.

  Happy coding :)

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  isamardzija•280

  @isamardzijaSubmitted almost 2 years ago

  • Background images aren't blending over eachother properly
  • Layout feels wonky, need to rework it in the future

  

  Static Profile Card

  1

  10
  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hey there👋 Good job!

   

  • For background patterns, Instead of using keyword values for your background-position, you can use percentages for the X and Y coordinates. Play with the numbers to get as close as possible to the design. More info on MDN.

   

  • You should also add background-repeat and set it to no-repeat.

   

  • The profile picture, due to accessibility reasons, should have alt attribute. It should describe what the image is. More info on W3.

  Good luck.

  0
• 

  Karin Lee•50

  @kleeblattdevSubmitted almost 2 years ago

  I did the challenge to get the grip of a responsive design.

  

  3-column-preview-card-component with flexbox

  1

  20
  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hey there!👋

  • For the border-radius to work, you must add overflow: hidden; to your article.

  Good luck on your future projects.

  Marked as helpful

  0
• 

  Hesam•420

  @hesam-fattahiSubmitted almost 2 years ago

  This is my first mobile-first📱 solution.

  Any comments are greatly appreciated.

  

  Signup page

  1

  20
  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  There is a problem when I test it on my phone. The "container" seems to have 0 padding on the right. Does anybody else have this problem?

  When I inspect it on the laptop, even with smaller viewports, there is no problem.

  0
• 

  Leonardo Rodrigues Gomes•160

  @gomes-leonardoSubmitted almost 2 years ago

  Guys, I hope you're doing well! In this challenge I couldn't fulfill the background image, someone to help me? Other than that, I completed the challenge

  

  profile-card-component-main

  3

  20
  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hey there 👋 Nice work!

  • For the circles on the background, you can put the two img elements outside the card component and use absolute positioning.

  • Also, the card component should be a main element. Using div is bad practice.

  Happy coding :)

  0
• 

  Mateus Barbosa•20

  @mteusbarbosaSubmitted almost 2 years ago

  I had a lot of difficult to implement the responsive layout to this challenge, it works fine on specific 375px and 1440px, but not well between those ranges. Anyone have a good guide about responsive layout to help me?

  

  Responsive page using flex and media query

  2

  60
  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hello there!👋 Congratulations on finishing this challenge.

  • You can make your component responsive only by using grid or flexbox and avoid using media queries.

  Using flex-wrap and flex, If you want to use flex. More info: flex-wrap.

  Using auto-fit and minmax(), If you want to use grid. More info: responsive-grid.

  • Also in picture element, you can use source so that you don't have to write anything on CSS and adding media query to change the image.

  More info on MDN.

  If you need further clarification, feel free to reach out to me.

  Keep up the good work.

  Marked as helpful

  1

  This comment has received 2 repliesShow
• 

  Fathima Nuha•30

  @Fathima-NuhaSubmitted almost 2 years ago

  I've used the most updated knowledge I have learned so far! More to go! Have used flex, Do update me about places I could have used grid.

  

  Desktop solution using CSS Flexbox - Product preview card component

  4

  40
  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hey there!👋

  Good job on finishing the challenge.

  • The image alt attribute shouldn't be empty due to accessibility reasons. It should describe the image.

  More info on MDN.

  Good luck on your future projects.

  Marked as helpful

  0
• 

  Eduard Ionescu•510

  @EduardIonescuSubmitted almost 2 years ago

  I wanted a challenge so I remade the whole html using JS.

  My question is, for the 'PERFUME' text, which tag should I use? Since I can't use an h2 tag above an h1 tag, so is a 'p' tag fine?

  Thanks!

  

  Responsive Product Preview using Flexbox

  2

  50
  

  Hesam•420

  @hesam-fattahiPosted almost 2 years ago

  Hey there!👋

  For the 'PERFUME' text, p works just fine.

  Also for the image, since you're using 2 different images based on viewport, you can use the picture element.

  More info on MDN.

  Keep up the good work!

  Marked as helpful

  0

  This comment has received 1 replyShow