Four card feature section

Community feedback

• 

  Leshy•580

  @LeshyNLPosted over 4 years ago

  Your solution seems to work well at both the 375px and 1440px marks as indicated in the challenge, so well done.

  However, it doesn't work so well at widths between those, as it shows the desktop layout from 376px and up (which is usually too wide and does not fit).

  The reason is that you seem to have built the desktop layout first, and then added a media query to make it work on mobile. It is generally advisable to do it the other way around: build the CSS for the mobile layout first, then add media queries for wider layouts. That way, you will always have a website on which the content fits, as wider layouts do not show until the screen is actually wide enough.

  It is just a small change, but should make a big difference on more complex challenges and pages! :)

  1

  ---

  

  Rishi Purwar•285

  @rishipurwar1Posted over 4 years ago

  @LeshyNL Thanks for your suggestion. I'll follow your advice in the next challenge. I wonder if you could tell me more about responsive design. Or could you suggest some better ways how to make website responsive??

  0

  

  Leshy•580

  @LeshyNLPosted over 4 years ago

  @rishipurwar1 Responsive design is a super broad topic and there is much more to say about it than a single comment.

  Very briefly, the approach is to start with your smallest layout and gradually increase the width, adding styles at relevant breakpoints to ensure that things look good at all sizes. Making use of natural text flow and relative measurement units as much as possible makes this easier.

  For more information, I would suggest just reading and coding a lot. There are a ton of great resources out there: css-tricks.com is a great one to start with, for example.

  2

  

  Rishi Purwar•285

  @rishipurwar1Posted over 4 years ago

  @LeshyNL Thanks

  0