All comments

• 

  ibrahim• 450

  @bagggary

  Submitted almost 2 years ago

  image rendering error, any help please!!!!

  

  profile card component using flex box

  2

  7

  0

  

  Malik Elbadri• 590

  @Maliklar

  Posted almost 2 years ago

  Hi Ibrahim, Your work is great, but I opened your solution and didn't understand your approach of setting the background images. You can check my repo at Github for this problem and I hope it will be of help to you Click Here. <br> This is how I set the background image:

  body {
      padding: 0px;
      margin: 0px;
      background-color: var(--Darkcyan);
      background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg);
      background-position-x: left, right;
      background-position-y: -50vh, 50vh;
      background-attachment: fixed;
      background-size: contain;
      background-repeat: no-repeat, no-repeat;
  }
   
  

  And for the card I just simply set the using the image attribute and gave the profile image a margin-top: -50% of its size to make it over the background image

  Marked as helpful

  2

  This comment has received 1 replyShow
• 

  Martin Rečka• 20

  @Marty9406

  Submitted almost 2 years ago

  Hello, this is my first project at Frontend Mentor.

  The biggest issue for me was to vertically center the whole element. I did it by using position absolute and transform translate. Are there some other (or maybe better) ways to vertically center elements?

  Did you find something what I could have done better?

  Thank you for your feedback!

  

  QR code component

  3

  12

  0

  

  Malik Elbadri• 590

  @Maliklar

  Posted almost 2 years ago

  Nice work, Your way is of positioning is fine. <br> If you want to center the element, you can also make the body's display as a flex and then make sure the flex body will occupy the how screen (height: 100vh, width: 100vw) after that you can add a single element to the body which is the Card and set the properties of the body to <br> display: flex; align-items: center; justify-content: center;

  this will make the element centered. <br> But your way of centering the position is totally fine because you have a single element to display.

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  jill pandya• 90

  @jillpandya2594

  Submitted almost 2 years ago

  Let me know how to improve the price section

  

  Order Summary Component

  #accessibility

  2

  4

  0

  

  Malik Elbadri• 590

  @Maliklar

  Posted almost 2 years ago

  Nice work, but you need to edit your solution to be more like the design by doing the following: 1- You need to add the background-color attribute to the color giving in the styles-guide.md. 2- You also need to add the background image provided in the images folder and position it correctly. 3- You have to look for a way to center the card. 4- Finally give the card body (below the card image) a padding.

  Marked as helpful

  1

  This comment has received 3 repliesShow