Media querries and CSS grid

Community feedback

• 

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  Nice work on this challenge! For the social icons, the easiest way to change the color would be to embed the SVG code from the icon files directly in the HTML. You can then change the fill of all elements inside the SVG to another color like this svg * { fill: yellow; }.

  Just a quick heads up that the vh units are currently throwing off the screenshot in the design comparison. I'd actually recommend using that unit only in very specific circumstances as it can have unintended consequences if someone has a really small screen height. Instead, I'd stick to using padding and margin on elements to space them out appropriately. Then the height of the containing element will just be the height of the content within and will be flexible based on the content as opposed to the screen height.

  I hope that makes sense with the way that I've explained it. Let me know if you have any questions. Keep up the great work!

  0

  ---

  

  Sodiq•100

  @salsod-starPosted almost 5 years ago

  @mattstuddert thanks for the feedback, I have been able to change the hover state of the svg icons, it's really not up to my taste but it will do, I'm very grateful.

  But I don't seem get what you are trying to say in the second paragraph. I would appreciate it if you could be more specific. Thanks

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  @salsodworld you're welcome! Using vh with height forces the height of the element based on the viewport and ignores the height of the content within. So you can get situations where the content overflows the height of the containing element if the height of the window is too short. So, I'd only ever use vh if you have a very specific reason for doing so.

  0

  

  Sodiq•100

  @salsod-starPosted almost 5 years ago

  @mattstuddert

  I understand you perfectly now, I will do something about it soon. A very big thanks to you once again

  0

  

  Sodiq•100

  @salsod-starPosted almost 5 years ago

  I have done everything I could but it's not taking any effect in the screenshot comparison design.

  0

  

  T

  Matt Studdert•13,611

  @mattstuddertPosted almost 5 years ago

  @salsodworld no problem at all. The screenshot is looking different to before. It used to have a big gap. One thing you could do is move the logo out of the .bg-image element and then put the background-image declaration on the header. This will allow the image to span the whole of the header and be a bit taller.

  0