Responsive design in Grid layout using CSS NESTING and BEM methodology

Community feedback

• 

  Marzia Jalili•3,970

  @MarziaJaliliPosted 3 months ago

  Congratulations on finishing the challenge!!!

  Some tips for a more structured CSS:

  • First, when you opt to nest an element that has a class name, there is no need to add the & selector.

  The main point for it is to have a symbol beforehand. Here the dot is considered the symbol.

  • Second, you could get the same layout for the mobile design without changing the display to flex.

  Simply change grid-template-columns to 1fr:

  grid-template-columns: 1fr;
  

  This way each element will take the entire horizontal space and get the job done.

  Hope it was helpful😁😁.

  Marked as helpful

  0

  ---

  

  mkalkandev•160

  @mkalkandevPosted 3 months ago

  @MarziaJalili Hey, thanks for your feedback and help. These are very useful for me. I did what you said in responsive design but unfortunately it didn't work. I have many deficiencies in responsiveness and I need to improve it.

  1

  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 3 months ago

  @mkalkandev hey,

  you can have a look at my solution for more clarity.

  0