FrontendMentor-Sunnyside

Community feedback

• 

  T

  Mike Hayden•1,005

  @mickygingerPosted over 3 years ago

  Hey Gavin 👋

  The reason for the spaces is because img is an inline element and so it's sitting on the baseline of where the text would be, this is the line that an m or an x "sits" on. The browser is leaving a space for characters with "descenders" like g or q.

  There are a couple of approaches here. You can set the img to display: block; or the parent container .griditem and .pic to line-height: 0;. Be careful with the second approach though, because it could affect the text in the adjacent grid items.

  Hope that helps!

  Marked as helpful

  0
• 

  Micheal•0

  @madumichealPosted about 3 years ago

  Hi guys I have a little problem.. while attempting this task I noticed that the SVG image isn't working.. I tried copying the path to my image source.. it didn't work.. I also used the url to set background it still Didn't work. What can do?

  0
• 

  Oto•400

  @TagviPosted over 3 years ago

  First of all, the most apparent problem with your page is paragraph colours. Another thing I'll point out is is that on large screens like 1920x1080 text and layout isn't very good. IMO attribution isn't necessary, on top of that you also forgot to input your name :D. another thing is that there is not pointer cursor on some links. the navbar has a few problems like too much padding, I also wouldn't recommend using the hover state as a trigger for the mobile menu, look into my solution and see the alternative. Using content-box isn't a good idea either I'd recommend using

  box-sizing:  border-box
  

  as it makes much more sense. I also see that you are using percentages on grid columns and rows, the standard is to use fr units which take up free space in fractions, for example, if I have 3 columns like 120px 1fr 1fr and have 1920 px wide screen, assuming that the website is fullscreen it will first use 120 pixels and then divide free space (1800px) into 2 fractions, 900 pixels respectively. this is way better because on 3 columns you are forced to use 33% 3 times and you will be left out with 1% extra space. Another thing is that you use ' !important ' which is not a good practice, I would recommend you to learn specificity and tackle problems with your knowledge about it. Also, try to keep classes easy to understand, for example, I'm looking at the styles in dev tools and I have no idea what .parabtn is. One more thing is that you are using the nth-child selector on the grid items which is not good because one extra element will turn things around like a rollercoaster, It's better if you use classes there and also some things can be omitted for example you set the egg image to order of 2 then the first item will auto-shift itself to the first column so it's not necessary. The white space between the rows can be fixed by adding height: 100% to the images 😉. Moral of the text is that you need to learn CSS :D

  0