Responsive 3-column-preview-card-component-mai

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey, great work on your first challenge in FEM!

  So loading your site, the layout in desktop is good, but the mobile state, the layout is squished which is not ideal.

  Upon inspecting your site, suggestion/s would be that;

  • Avoid using vh units in an important content or component. As I can see, opening the dev tools at the bottom, the layout resizes and got smaller. Upon looking, you are using height: 100vh on the elements. I suggest that you use other units like rem to the container and take the full height of it for the different card. So like using rem in your container selector and using height: 100% for the cards selector. But remember to add gap property in your cards, since they are column direction, there is no initial spacing. Or you could make use of the justify-content on it.

  • Not consistent hover state on the button. Your first button is the only button that have a hover state. Adding it also on the other button will be really great. Also, I see that you are transitioning the background-color and border but if you hover on it, you can see that the container resizes a bit right. To prevent this, just already add that border in your button, since it is color white as well like the background. You just hover transition the background-color to transparent, and the border will be seen. This way, the container won't resize.

  • Fonts. I think you are using a different font, check this one out so that you are using like the original font.

  • Lastly, that mobile state needs to be adjusted, because like what I said in the beginning, the layout is squished. You are using width: 50% in your different cards, maybe taking the full 100% will be better, then just add paddings on the body or the container so that it won't touch the sided of the screen.

  Though it is a lot, it will be really beneficial to refactor things right. But still, good work^

  1

  ---

  

  Allamprabhu•120

  @Allamprabhu2003Posted over 3 years ago

  @pikamart Thanks a lot for your valuable suggestions.

  0
• 

  Allamprabhu•120

  @Allamprabhu2003Posted over 3 years ago

  Please help to improve my code

  0