Huddle landing page with curved sections with html and css

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  Hey @Evanny lovely job on this one 🙌 it looks great.

  One thin you might want to think about stopping the page from spreading too wide a very large screens. At the moment things are spreading out as wide as the screen and some constraints might make things look better?

  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 my case, mostly, my header, main, and footer the middle column, and stops them going wider than 1440px. It’s also pretty easy to ‘break’ elements out of this constraint if you need to.

  Other people use container classes to do the same thing. This article has a good run down of alternative approaches https://css-tricks.com/the-inside-problem/ You will note I am actually using the approach the author doesn't like!

  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.

  You should also add perhaps a max-width property on the hero image, as this is also getting very big - I would address the overall spacing issues first and then see how things are looking and make any adjustments as needed.

  But great work and keep it up! 👍

  Cheers 👋

  Dave

  Marked as helpful

  2

  ---

  

  Edy•530

  @EvannyPosted about 3 years ago

  @dwhenson Thank you very much that great comments help me a lot to improve! I will apply them to this challenge and in future solutions.

  0