3-column-preview-card-componenet

Community feedback

• 

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  Hello Lyna 👋

  Nice work here, although still many things to improve:

  • When using display: flex, flex-direction: row is default behavior so it is unnecessary to declare it.
  • Most html elements (some element will be stricter and need to specify it like a) will inherit the font style from it's parents, so try and set the font-family in the parent element and remove all font-family in child elements and see, same to the color property.
  • Take some research on rem unit (relative size to root font size - normally 16px, so that when user zoom-in browser the font can scale up respectively) and use it on font-size.
  • You can use border: 1px solid black for example for short.
  • Start practicing with media queries for responsiveness (below is an example)

  /* 
  max-width is when screen getting smaller
  min-width is when screen getting bigger
  */
  @media only screen and (max-width: 600px) {
    .div-container {
      flex-direction: column;
    }
  }
  

  Keep it up, happy coding 😁

  0

  ---

  

  Lyna•60

  @djelidlynaPosted 4 months ago

  @haquanq heeyy👋🏻​ omg thank you very much for all those informations
  i Will make some changes , 1\yess i know rem i used it in the first 2 project thinking that it would solve all the size screen problem but no and does not make sens the 2 project when i submit them they became a desaster not like in my browser, i suspected also on position (relative , absolute) that i used . 2\when i make some changes do i need to remove it and re submit it? 3\thanks also for the media option🫡​ 4\all those projects that i did the look perfect on my browswe but a pig screen size on other's browser 😭​

  1

  

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  @djelidlyna are you using your browser dev tool for development? Would be better to see how your page react to different resolution with dev tool (F12 on browsers)

  Using rem is not fun when the number is odd, like 29px would be 1.8125rem (16px == 1rem). To me i am using an VSCode extension for math (use shortcut to calculate divisions) so it is much faster.

  0

  

  Lyna•60

  @djelidlynaPosted 4 months ago

  @haquanq yes i agree, i appreciate all your help , what dev tool ? i use the vscode extension (live server) to see my work

  0

  

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  @djelidlyna For example in chrome dev tool, we can stimulate different screen size by pressing CTRL + ALT + M

  0

  

  Lyna•60

  @djelidlynaPosted 4 months ago

  @haquanq thanks a lot

  0

  

  haquanq ®️•1,585

  @haquanqPosted 4 months ago

  @djelidlyna i've completed this challenge recently, you can check out mine for references

  0

  

  Lyna•60

  @djelidlynaPosted 4 months ago

  @haquanq i will thanks for informing me , have a good time

  0