HTML, CSS, Flex-box for responsive design

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Great job, Victor Bruce! 👍

  Just one last thing in addition to the wonderful feedback you already have—setting a max-width on the main container or wrapper will ensure that the content of the page doesn't look too stretched on large screens (although this design still looks pretty good when the screen width increases). 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Victor Bruce•140

  @victorbrucePosted almost 4 years ago

  @ApplePieGiraffe Thank you for the feedback. I will definitely do that.

  0
• 

  T

  Grace•31,090

  @grace-snowPosted almost 4 years ago

  Hi Victor

  Good job on this, it looks nice on all screen sizes!

  A few larning points for next time:

  1. Only include alt text on images that have meaning, otherwise leave the alt text blank. e.g. when I turn images off for your page, I get reviews rate star reviews rate star reviews rate star reviews rate star reviews rate star Rated 5 Stars in Reviews - as you can see, the alt text on the images adds no meaning there and should be alt="" to demonstrate it's intentionally blank

  2. Remember with CSS grid that it is for 2 dimensional layouts. With a minor adjustment to your html markup, your .card elements could easily be one grid rather than just the card header.

  3. I would advise against setting your html size to be small. There is little reason to do this and forces you to then change font sizes throughout a project. Not a big problem on a little challenge like this, but it could cause big issues on a large project where rems and ems are then used to size elements.

  Hope all that's helpful :)

  1

  ---

  

  Victor Bruce•140

  @victorbrucePosted almost 4 years ago

  @grace-snow Thank you very much for your detailed feedback. I am very grateful and excited at the same time. I will quickly make adjustments to my source code to reflect what you have conveyed.

  Learning point 2: If I understand point 2 quite well, flex-box will have been a better option for the card section because flex-box works well with 1-dimensional layouts whiles css-grids works well with 2-dimensional layouts right?

  Learning point 3: I totally agree with you 100% on learning point 3. I the behavior you indicated. I had to change the font-size for each view-port(phone, tablet, medium-desktop-screen) and it was a total mess.😀

  The only reason for setting the HTML font-size to 62.5%(10px) is to help me easily calculate the pixel equivalent in either rem or em. That is if I want 16px in rem all I need is to divide 16px by 10(1.6rem).

  I will kindly want to know, what is the best approach to tackle this, please? What's your preferred solution around this?

  Thank you once again. 🙏🏾

  0
• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 4 years ago

  Hi Victor, congrats on finishing this challenge! Here are a few points:

  • I'm looking at the mobile view and I'm not seeing all of your project because body has height: 100vh on it.
  • The testimonial cards can also use max-width to control the stretch - they look really wide on medium-sized screens.
  • At 769px, the last ratings div is touching the gutter. Maybe it's better to keep them all in a straight line and indent them when you have more space
  • The testimonial cards could use some margins or gaps in between them around 1025px to 1370px

  Hope this helps :-)

  1

  ---

  

  Victor Bruce•140

  @victorbrucePosted about 4 years ago

  @emestabillo Wow! thanks so much for your feedback🙏🏾. I will go back and make adjustments.

  1

  

  Victor Bruce•140

  @victorbrucePosted about 4 years ago

  @emestabillo Hi!, I have made some improvements to the suggestions you gave. Kindly take a look at it again. Thank you very much!😊

  1

  

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 4 years ago

  @victorbruce Hey Victor, it's looking much better! For your next project, try to go mobile-first and be more aware of spacing between your elements. Great work!

  1

  

  Victor Bruce•140

  @victorbrucePosted about 4 years ago

  @emestabillo Will surely do that. Thank you once again

  0
• 

  Jazy•15

  @jazy-bhaiPosted about 4 years ago

  https://www.w3schools.com/css/css3_backgrounds.asp

  I was facing the same problem. This helped me. I hope this helps you too !

  1

  ---

  

  Victor Bruce•140

  @victorbrucePosted about 4 years ago

  Thank you so much for the link, I will check it out.

  0