Mainly HTML and CSS

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  Hey @Timi-cell 👋 - Great job on this one it looks lovely!

  One think you might want to think about is stopping the page from spreading too wide a very large screens? There are many ways to do this but I set a grid on the body element, with three columns, as using a class selector as follows:

  .center-content {
  	display: grid;
  	grid-template-columns: minmax(1rem, 1fr) minmax(375px, 1440px)minmax(1rem, 1fr);
  }
  
  .center-content > *  {
  	grid-column: 2;
  }
  

  The 1440px is the max-width you want the main content to be, and the 1rem values is the smallest spacing you want either side of the main content on small screens (I sometimes put this to 0 and use a container to add padding to each section).

  The second part positions all direct children of the body in this nicely sized middle column. In your case, mostly, your sections and footer, and stops them going wider than 1440px. It’s also pretty easy to ‘break’ elements out of this contestant if you need to.

  Other people use container classes to do the same thing. Either way it's a good idea to find an approach that works for you as you'll need this for a lot of FEM challenges.

  Other small suggestions are to use the header element rather than the section that you have your top class attached to and to tone down the shadows a little bit - perhaps some more blur value? I can never get these right and often just use one of the online tools that can help visualise what I am looking for!

  But lovely work 🙌 and keep it up 👍

  Cheers 👋

  Dave

  Marked as helpful

  0