Challenge using HTML5 and CSS3

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great job on this one. Though I need to zoom out because I am getting the mobile layout. Are you working on a large screen? Well it will be awesome if user will get the desktop layout, some, including me, uses a 1366x768 desktop. That will give you some idea on where to add breakpoints:>

  Regarding your query, well since you are using justify-content: space-around it will dynamically resizes so things can be equal in term of alignment in y-axis right. So when the p tag is wrap onto the next row, the justify-content will change the placement because the p tag now occupies an extra space at the bottom.

  If I were to do this challenge, I will use grid. I will give a fixed size in the grid-template-rows so that, even if the p tag wraps, it won't affect the title or other component, since they have a dedicated size. On this, I can't really give exact answer, but I hope that there others here will see and help you on that one.

  For other suggestions, I really encourage you not to use vh in terms of unit, especially when it is an important component or a container. Like your container selector, it has a height: 60vh so it is only limited based on the height of your screen. So when you inspect your website, then decrease the size from the bottom, you will see your content squished. I recommend using other units like rem.

  Also, maybe it will be better if you use more width in the body tag in the mobile state. Right now it only takes 60%, so it is very narrow. Tweaking it to higher will be awesome, oy using 100% then just add paddings on it.

  Overall, really good job on this one and I hope someone can help you with that query^^

  1
• 

  Nono•20

  @NonoBtwPosted over 3 years ago

  Hey, thank you for your answer it really helped me! Now I have some clues to solve my problem so I will try with it ^^. I had not the problem with the mobile version on my screen so i didn't see it so i'll try to fix it as well. Again, thank you for your answer!

  0