All comments

• 

  Joseph Wangai• 190

  @Joseph5404

  Submitted 9 months ago

  Please help with mobile responsiveness. Thanks in advance

  

  testimonials-grid-section-main using grid

  1

  5

  0

  

  Andro87• 1,370

  @Andro87

  Posted 9 months ago

  Hi Joseph5404!

  Great job in completing this challenge!

  To improve your solution you can:

  • Use max-width and margin: auto properties in your main container. For example, for the max-width property, you can write { max-width: 90% } for small devices and { max-width:52rem} for bigger ones ;

  • Use grid-template-areas and grid-area properties for placing elements using named template areas.

  Here there is a link that can help you: Css-tricks: grid-templat-area

  Hope this will help you!

  Happy coding!

  Marked as helpful

  0
• 

  NIKHILKUSHWAHA9877• 20

  @NIKHILKUSHWAHA9877

  Submitted over 1 year ago

  I was not able to change color of image from black and white to purple .. please viewers also do help me for the same.

  

  Preview-card-for-website

  1

  1

  0

  

  Andro87• 1,370

  @Andro87

  Posted over 1 year ago

  Hello NIKHILKUSHWAHA9877!

  Great job in completing this challenge!

  To solve your issue you can:

  -set a background-color: hsl(277, 64%, 61%) on the parent element ;

  -use the mix-blend-mode: multiply property and an opacity of 0.5-0.7 on the child element;

  In your case it should be something like this:

  .img {
      display: flex;
      background-color:hsl(277, 64%, 61%);
  }
  .img  img {
          width: 100%;
          height: 100%;
          opacity: 0.7;
          mix-blend-mode: multiply;
  }
  

  Happy coding!!!

  Marked as helpful

  0
• 

  Octávio Garcia• 550

  @oc-garcia

  Submitted over 1 year ago

  My second project on react. Would love some feedback.

  

  Intro component on React

  1

  2

  0

  

  Andro87• 1,370

  @Andro87

  Posted over 1 year ago

  Hi oc-garcia! Great job in completing this challenge!

  To improve your solution you can:

  -use box-sizing: border-box property for all elements to include the padding and border in an element's total width and height:

  *{
  box-sizing:border-box
  }
  

  -add max-width and margin: auto-properties in the "page-container" class (es. max-width: 90% for small devices, max-width: 58rem for bigger ones) to view the optimal layout based on the device's screen size.

  Happy coding!!

  Marked as helpful

  1