Mobile first site using CSS Grid

Community feedback

• 

  Sarah Almeida•20

  @sarahdialmeidaPosted over 3 years ago

  Great work, Randy!

  Marked as helpful

  1

  ---

  

  Randy Kwalar•75

  @RandyKdevPosted over 3 years ago

  @sarahdialmeida Thanks 😁

  0
• 

  T

  Grace•31,270

  @grace-snowPosted over 3 years ago

  I think you should focus some learning on when to use paddings vs margin. The way you're adding these to each element is creating a lot of work for yourself. The card body only needs some padding. Then elements within it can have vertical margin. That's much simpler than adding bespoke padding and margin on every element

  Marked as helpful

  1

  ---

  

  Randy Kwalar•75

  @RandyKdevPosted over 3 years ago

  @grace-snow Ok, will do. Thanks.

  0
• 

  Ahmed Faisal•5,095

  @afrusselPosted over 3 years ago

  Nice work.

  Marked as helpful

  1

  ---

  

  Randy Kwalar•75

  @RandyKdevPosted over 3 years ago

  Thanks @afrussel

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  You should take the background off your main tag and put it on the body tag and then change the background size from cover to background-size: 100vw 40vw;

  Marked as helpful

  1

  ---

  

  Randy Kwalar•75

  @RandyKdevPosted over 3 years ago

  @palgramming Ok thanks, @Patrick.

  I already have a background-color on my body, can I have both background-color and background-image property on one tag?

  Also, please could you explain the need for background-size: 100vw 40vw;

  0

  

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

  @RandyKdev background color does not effect background image but the image stacks on top of the background color. You can also have multiple images https://www.w3schools.com/Css/css3_backgrounds.asp

  The 100vw makes the image stretch across the browser from the left to the right and the 40vh keep the image 40% of the height of the browser window

  0

  

  Randy Kwalar•75

  @RandyKdevPosted over 3 years ago

  @palgramming Thanks for the help

  0