Responsive landing page with css flexbox

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  Hiyo,

  Your social icons don't change colour on hover because they're svgs. It's a bit more complicated to style svgs than usual: you need to add them as an inline svg (=>copy-pasting the whole long svg code into your html). Then you can play around with the attribute called "fill". I'd personally say though, this challenge doesn't really call for such complicated methods, being just a junior challenge. For example, I just used Font Awesome icons instead of the svgs given. They're a lot easier to style if you're not very comfortable styling svgs yet and the result is the same or pretty similar! ^_^

  As for your other question, the answer is yes, ideally you accommodate to all screen sizes. If you think about it, often screens are wider than 1440px nowadays! It's an easy fix though. What I'd do is to move the max-width:1440px to the main and then add a margin: 0 auto as well. Also, you could move the footer outside of main. This way you won't need to wrap all the other content in a "main-container" div either.

  There are some bits and bobs to adjust for large screens but I'm sure you can do it, as most of what you done looks great already! Good luck!

  Marked as helpful

  2

  ---

  

  Aldo Adabunu•290

  @KwakuAldoPosted over 2 years ago

  @FluffyKas Thank you. Yes, I figured out how to get the display fixed by using margin: 0 auto;, I already had the max-width set to 1440px.

  About taking the footer outside the main element, isn't all landmarks supposed to be contained in the main element, I remember doing that some time ago and getting accessibility issues on my solution.

  I don't have experience with font awesome, but I will look into that and see if I can get it working.

  Thank you for the feedback.

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @KwakuAldo main defines a landmark, just like header and footer, both of which are usually placed outside your main. That being said, you can safely place footers and headers inside main if you wish to do so, but in that case they won't function as landmarks by default. You can read more about this here and here.

  Marked as helpful

  0

  

  Aldo Adabunu•290

  @KwakuAldoPosted over 2 years ago

  @FluffyKas Thanks a lot for the feedback once more, I did just that and I think everything looks good now, albeit the footer doesn't occupy the entire page, but it is centered well and looks good. I will try and make it fill the entire bottom of the screen.

  0

  

  P

  Fluffy Kas•7,715

  @FluffyKasPosted over 2 years ago

  @KwakuAldo You have an align-items: center + a max-width on your body, that's why your footer isnt taking up the whole space ^^

  Things look a lot better now though, well done!

  1

  

  Aldo Adabunu•290

  @KwakuAldoPosted over 2 years ago

  @FluffyKas yeah, I took the max-width out, and now the footer looks good!

  0