Responsive card solution using HTML5, CSS3, and Flexbox

Community feedback

• 

  MaelkMark•150

  @MaelkMarkPosted 3 months ago

  Looks cool, great job! But you should't use multiple media queries for the same breakpoint. Declare only one and then put all the needed styling inside it. It's important because if you want to change the style of the card later and need a different breakpoint, you'll have to change it everywhere in the code! And using only 1 media query for 1 breakpoint is also much cleaner, easier to maintain and understand for other people and for you too.

  0
• 

  MikDra1•6,960

  @MikDra1Posted 3 months ago

  Limited Browser Support for :root Variables:

  • The :root variables might not work correctly in older browsers. Providing fallbacks could improve compatibility. Here is a quick VIDEO about how you can create a fallback to the variable

  Font Sizing and Scaling:

  • If the font size is defined in pixels (px), it could create scaling issues on different devices. Using em or rem would be more flexible. And here is how we use rems:

  html {
  font-size: 62.5% // It means that 1rem = 10px. From this it is easier to use rem
  }
  
  p {
  font-size: 1.6rem; // Here this paragraph font-size will be 16px;
  }
  

  If you don't understand it already here is a VIDEO

  Hope you found this comment helpful 💗

  Good job and keep going 😁😊😉

  0