Mobile first social dashboard theme switcher using grid and flex

Community feedback

• 

  Vishal Biradar•895

  @vishalbrdrPosted over 3 years ago

  Try adding this code for your card containers display: grid; grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); and for ACCESSIBILITY ISSUES wrap all your divs and section inside <main></main> Great job, have a look at my Solution:- https://vishalbrdr.github.io/Social-media-dashboard/

  Marked as helpful

  0

  ---

  

  victoriaodemakin•125

  @victoriaodemakinPosted over 3 years ago

  @vishalbrdr thank you so much. i went through your code on GitHub. it really helped as I forgot I could use the :before pseudo-element. I have a question if I set the grid-template-column to repeat(auto-fill, minmax(25rem, 1fr)); how do i define the number of column I want. I don't have much experience with grid but doesn't this code(repeat(auto-fill, minmax(25rem, 1fr));) only caters for just two column? any response will be helpful. thank you again.

  0

  

  victoriaodemakin•125

  @victoriaodemakinPosted over 3 years ago

  @vishalbrdr your animation was really nice too. what is GSAP ANIMATION please ?

  0

  

  Vishal Biradar•895

  @vishalbrdrPosted over 3 years ago

  @victoriaodemakin this code grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); automatically defines no. of columns required according to width of parent and child.

  0

  

  Vishal Biradar•895

  @vishalbrdrPosted over 3 years ago

  @victoriaodemakin GSAP is a javascript library for animations.

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  On your top row of cards your twitter card is a different size than the other 3

  Marked as helpful

  0
• 

  Michael Adebambo•1,045

  @Blazing-MikePosted over 3 years ago

  Nice one... You should check the margin side on Mobile screen... I'm currently doing this challenge too and it's hard to me... But I'm figuring out.

  0