Responsive HTML site using CSS Grid

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @antoniotullyspinozz! I think your solution looks pretty good :)

  As for your question, I think you started with the desktop design and then adjusted it to mobile, am I right? It's generally a lot easier to start with the mobile layout - most of the content will be in a single column, so there's no need to reposition things - and then when there's enough space on the viewport, to move things around, introduce grid etc.

  In your solution, I would also make sure that your background image on desktop doesn't repeat - you can use background-repeat property and then background-size: cover to make sure that the image is not smaller than the viewport :)

  1

  ---

  

  Antonio TS•60

  @antoniotullyspinozziPosted over 3 years ago

  Thank you for your input. I started my next project by doing just that, starting with mobile design... and yes, you're right it tends to be easier to do it this way. However, something I hadn't considered is not even using grid in the mobile design but introducing it as you increase the viewport. So, thanks for the lesson.

  Also, would there be a difference between background-size: cover and background-size: auto 100%;?

  1

  

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  @antoniotullyspinozzi oh sorry, I was wrong then - I was guessing based on the max-width media queries. Anyway, I wasn't sure about the background size so I had a look on MDN - and yes there would be a difference, you can change the values in the demo on MDN to see it better - but basically if you use cover, parts of the image can be cropped off (or tiled, if you don't set background-repeat) and with auto 100% that won't happen. And now that I've done this challenge myself, I'm thinking that maybe the latter is actually a better option :D

  1