HTML and CSS only

Community feedback

• 

  

  Grace•32,130

  @grace-snow

  Posted about 4 years ago

  Hi,

  I'm not sure why the project has such a complex set up? You are calling render blocking js in the document head, which doesn't seem to be being used. I recommend you remove that.

  I also think you should take another pass at this challenge tbh. There is a quite a lot of learning points that need addressing before moving on.

  On mobile for me, things are not positioned right and there is loads of scroll in all directions

  I suggest

  • remove excessive divs in the html that aren't needed for this layout
  • semantic html - use meaningful elements for the stats. Numbers don't make sense as headings, and they need to be in the same meaningful element as the word that follows them
  • use css to capitalise text, don't write it like that in html
  • remove all position absolutes and transforms. Create the layout with flexbox. You'll find it easiest if you style mobile first
  • remove large paddings and margins
  • change units in css - font sizes must never be in px, use rem/em; line-height should be unitless like 1.5;
  • remove all the widths and heights. You won't need almost all of them. Just a max-width on the card, min-height on the image, maybe flex-basis 50% on desktop.
  • remove visibility hidden from attribution

  I hope these suggestions help your learning

  23
• 

  James Gascoigne•130

  @Gascoigne09

  Posted about 4 years ago

  By the looks of it you've tried to use transform to centre your container. You'd need to include this i believe:

  position: absolute;
  top: 50%;
  left: 50%
  transform: translate(-50%, -50%);
  

  23
• 

  Vitor Lacerda•150

  @vitorlfaria

  Posted about 4 years ago

  Your design looks very good. The only thing remaining is to center it, like @Gascoigne09 said.

  Other thing that you can do is use flexbox on the body. Something like this should work:

  body{
     display: flex;
     align-items: center;
     justify-content: center;
  }
  

  Let me know if this works for you. Keep coding and happy coding! =D

  11