CSS GRID, FLEX BOX, MEDIA QUARIES

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 2 years ago

  Hello

  I hope this feedback helps

  • you need to use all the google font links provided. Choose the specific weights you need to get the font link. It will have 2 links before the font one that you need to use for better performance
  • Is only one image provided for this challenge? I thought the starter file would include a mobile and a desktop image. If there is only one image, you don't really need to use the picture element but it's fine if you want to still use it.
  • Some of the text in this is TINY! Way smaller than the design. Try to get it closer to the design if you can
  • Never have font size in pixels, not even once. Use rem. It is extremely rare you'd ever want to use em for font size either. I can't think of any time that would be good to do
  • you need to add overflow hidden to the component so the corners where the image overflows get cropped off and you can see the border radius
  • the component needs a little margin (or its wrapping element a little padding) on all sides so it can never touch screen edges
  • The image needs height 100% on desktop and object-fit cover
  • Never use percentages for border radius! That creates super strange curves because it's taking a % of the width and a % of the height. You will always want to use a fixed value so the curves stay even on both axis
  • You must remove the width from .info. That is making the text area overflow the grid. Always let the grid define the sizes things should be, not the child elements
  • I think you are missing text align center on the mobile view
  • Always define media queries in rem/em (never pixels)
  • You should be working mobile first. Mobile styles should be the default. Only override what you need to in (min-width) media queries to target larger screens

  01