Huddle landing page with a single introductory section

Community feedback

• 

  Fluffy Kas•7,655

  @FluffyKas

  Posted about 3 years ago

  Hiyo,

  Both grid and flexbox can be used for this challenge so whatever suits you. On the other hand, if you're not sure what you're doing with grid, it can get real messy. Flexbox might be a bit easier to understand for newbies. From what I can see in your code, you might want to check out some grid learning resources (I can recommend some if you don't know any).

  But to provide some quick fix:

  1. Remove grid-auto-rows and auto-columns, they do nothing for you here.

  2. Change your height to min-height: 100vh (you don't want to lock your website to a fixed height). This will reveal some additional problems: having some extra rows in your solution. Just get rid of the grid-template-rows altogether and it will be fine, you don't really need to define them here.

  3. Change the width on your body to max-width. Don't use % or vw for this, as it will stretch and stretch your solution as the screen size gets larger. Use rems instead. Or a combination of width and max-width can also work, like this: width: 90%, max-width: 100rem (this is just a guess, may not be the best width in this case, but you get the idea).

  To answer your second question, your media query seems perfectly fine. If you wanna optimise it, try a mobile-first workflow and use min-width in your next project. That way you usually can get away with writing less code and it's considered best practice.

  There are some other things to be aware of:

  1. Don't set width: 50vw on images. It's the best to use the following code most of the time: max-width: 100%,height: auto, display: block. This ensures that your image scales properly, no matter the screen size.

  2. Adding a background-size: cover to the body would make sure the bg image covers the whole screen nicely.

  3. You could wrap your social media images in a tags (as they're links) and then add aria-labels and cursor: pointer to them.

  4. Add a cursor: pointer to your button as well.

  5. Wrap your main content in main (so everything apart from the header and footer).

  There's a few other small bits, but all in all, just look up grid/flexbox a bit. ^^ I found, this isn't actually a very easy challenge to do layout wise so you did well! Good luck!

  33

  Marked as helpful