Responsive Grid Card

Community feedback

• 

  Bryan Li•3,530

  @Zy8712Posted about 1 year ago

  Your site looks pretty good. Main feedback I'd give is with regards to how your container reacts to changes in screen size. When in the mobile layout your container should have its three sections in three blocks vertically stacked on top of each other. Additionally, when reducing window size your container shrinks resulting in text overflowing out of the container.

  One additional thing, you should add to your html is a <main> tag. This would primarily be for accessibility purposes.

  Hope this helps 👍

  Marked as helpful

  1

  ---

  

  P

  Adrian Trandafir 🎮•330

  @XenoMeePosted about 1 year ago

  @Zy8712 It triggers the mobile layout for screen-sizes with max-width of 375px. Chrome doesn't apparently shrink the window to that size, only in the inspector.

  I noticed the text overflowing but I didn't optimize the website for multiple breakpoints in the media queries.

  Thanks a lot for all the information!☺️ Will make the next challenges/website more responsive to screen size changes.

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted about 1 year ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • For specificity reasons you should work with classes instead of ids because they are more reusable. You can use ids to work with JavaScript, but you should use classes to style your elements. You can read more about this here 📘.

  • Setting the width of the component with a percentage or a viewport unit will behave strangely on mobile devices or large screens. You should use a max-width of 650px to make sure that the component will have a maximum width of 650px on any device, also remove the width property with a percentage value.

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  1

  ---

  

  P

  Adrian Trandafir 🎮•330

  @XenoMeePosted about 1 year ago

  @MelvinAguilar Thanks a lot! ☺️

  Noted:

  • Classes for styling and IDs for JavaScript.
  • max-width to set a fixed width to the component so that it doesn't behave strangely on different screen sizes.

  I will modify the project around your information. Much appreciated!

  1