Testimonials Grid Section

Community feedback

• 

  Malesela Kgobe•555

  @M-KgobePosted over 3 years ago

  Hi, I realized you might have forgotten to add the "big quotation" picture.

  In that case @vansasetia helped me out with this code:

  Daniel { background-image: url('./images/bg-pattern-quotation.svg'); background-repeat: no-repeat; background-position: top right rem(20); background-size: auto; }, (Sorry about the messy copy and paste, am fairly new here )

  The code was based on my html classes, so perhaps you can find the values helpful in completing your solution, and adjust it according to your classes.

  Marked as helpful

  0

  ---

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @M-Kgobe
  Hi Kgobe, yes you are right, i am forgot about "big quotation" picture. thanks for remind me,
  this i got so far,

    background-image: url(images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: top right;
  

  but the "big quotation" picture is far in the right, any idea how to make the "big quotation" picture move a little bit to left ?

  0

  

  Malesela Kgobe•555

  @M-KgobePosted over 3 years ago

  @walmanjm at the top of my head I would say try out the padding options.

  0

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @M-Kgobe i found the way, its work :

    background: url(images/bg-pattern-quotation.svg) no-repeat hsl(263, 55%, 52%);
    background-position: 80% 0%;
  

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @M-Kgobe Thanks for mentioning me! I really appreciate it!👍

  @walmanjm For the background-position, in my opinion using rem unit would be much better since it is only relative to html font size setting, while the % unit is relative on the parent width which is sometimes makes a weird positioning on small screen size or very large screen size. So, be careful with it😉.

  So for the background-position what I recommend would be something like this:

  background-position: top right 1.25rem;
  

  You can adjust the right until you get the position that you want.

  That's it! Happy Coding!

  0

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @vanzasetia ok, thanks again, such a nice input

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi walmanjm! My name is Vanza!

  I have a suggestion for you. On mobile screen (360 px) the padding on body is too big, it makes the card so narrow, try to decrease it.

  That's it! Hopefully this is helpful!

  Marked as helpful

  0

  ---

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @vanzasetia Hi Vanza, ok i will try again check the code, and also try to combine your input and @jmnyarega input,

  thanks alot guys

  0
• 

  P

  j5•2,290

  @jmnyaregaPosted over 3 years ago

  Great work @walmanjm I like how you have used grid-areas on this.

  One small observation:

  • On bigger screens >1500px everything stretches and the grid slightly loses its nice shape. You can easily fix that by setting max-width on the body element.

   body {
      max-width: 1440px;
       margin: 0 auto; // centers everything nicely
   }
  

  Marked as helpful

  0

  ---

  

  walmanjm•425

  @walmanjmPosted over 3 years ago

  @jmnyarega thanks alot Jos, really appreciate your input,

  0