huddle-landing-page-with-single-introductory-section-master

Community feedback

• 

  tdenis29•45

  @tdenis29Posted about 3 years ago

  Hey Midnith,

  Im bored so I wrote alot.

  I got some fixes. First of all it does look really good and you're so close! I debugged all this in Chrome Dev Tools it's very useful and I use it all day everyday.

  I like to do mobile first, I write all my base styles then use a single media query to write the rest. Trust me you end up saying flex-direction: row a bunch but its way better, for me anyways.

  @media (min-width: 768px){

  }//Tablet

  @media (min-width: 1086px){

  }//Desktop

  The min width, is the minimum width the viewport needs for those styles to take affect. So I write all the mobile first then, all nested in those queries, I do the desktop and tablet styles

  Ok so for your site I made some changes: I removed display grid and the grid declarations on body. grid-template-areas is better for what you are thinking (i think)because vh is based on the height of the users screen in the browser not the height of the whole page. I also took off the padding declaration on the body.

  Your code is good and I'm jealous, I wish mine looked that good when I started out. I had a clearfix on every element I did for months. Here's what I did to your site.

  body{ height: 100%; }

  .container{ width: 100% margin: 5rem 0 5rem 0; (top,right,bottom,left) }

  .image{ width: 50% //replaced 24vw }

  .main-content{ width: 50% //replaced 24vw }

  removed center center from the background so we couldn't see the circle.

  .main-content h1{ width: 90% //90%of .main-content width! font-size: 2.7rem; }

  .register{ font-size: 1.2rem; }

  footer{ display: flex; justify-content: flex-end; //desktop //center for mobile }

  this was formatted nicely until i posted this

  Marked as helpful

  0
• 

  Harmanjot Singh•985

  @arkharman12Posted about 3 years ago

  Looks great! Just need some extra margin/padding on smaller screen sizes :)

  Marked as helpful

  0