Testimonials Grid Section Using Pure CSS

Community feedback

• 

  Shalom2935•420

  @Shalom2935Posted over 1 year ago

  Hey @Nathasha, I really like the way you explain every step of your code. Some ideas to improve your code:

  • Wrap the code inside the body in a main element instead of a div; that will make your code more semantic therefore fix the accessibility issue.
  • The .parent-wrapper element is too wide, give it a width of 80% instead of max-width:1440px.
  • I think doing it with flexbox is too much work, learn the css grid and you will see how simple it could have been.
  • There is quote in the background of .daniell-tetional-wrapper that you missed. Two ideas to help you choose what suit you the most. 1- give the .daniell-tetional-wrapper a relative position, give the quote you want in the background an absolute position; use top and right properties to adjust his position, then use the z-index so that the quote will be beneath the text. 2- place the quote as the background-image of .daniell-tetional-wrapper, then adjust his position with background-position: top; and background-position-x: "value_that_will_work".
  • Your responsive is designed only for large and small screen's size, it would be very nice if you added a medium size screen.

  I hope my comments will help you somehow, happy coding journey.

  1

  ---

  

  Dumte Nwidoobee Joshua•100

  @DumtePosted over 1 year ago

  @Shalom2935 I'm really happy with your comment. Ive been struggling with how to fix the quote behind Daniell.

  Should I apply a background-image property on Daniel testimonial of I should use am img tag inside the html?

  Please through more light on this. Thanks once again for the analysis.

  0

  

  Shalom2935•420

  @Shalom2935Posted over 1 year ago

  @Dumte you don't have to add an img tag. let's assume you have <div class="testimonial__daniel"></div> then you can have a css code like this:

  .testimonial__daniel {
  background-image:url('img.png');
  background-position:top;
  background-position-x:70%;
  }
  

  I'm glad my comment helped you. Hope this one will be useful as well.

  0

  

  Dumte Nwidoobee Joshua•100

  @DumtePosted over 1 year ago

  But there is a purple background colour in hex value already assigned to each of the divs. How do you incorporate both @Shalom2935

  0

  

  Shalom2935•420

  @Shalom2935Posted over 1 year ago

  @Dumte set the background-color as usual. It won't be an issue

  0

  

  Dumte Nwidoobee Joshua•100

  @DumtePosted over 1 year ago

  @Shalom2935 Yes thanks. I also added the background-repeat: no-repeat; and it works just as I expected.

  Secondly, I want you to help me make it responsive on mobile phone and tablets

  0

  

  Shalom2935•420

  @Shalom2935Posted over 1 year ago

  @Dumte sure but it is a bit uncomfortable here. just DM me on twitter: here

  0