profile-card-component with flex box

Community feedback

• 

  Daniel 🛸•44,250

  @danielmrz-devPosted 11 months ago

  Hello @GrayTechFun!

  Your project looks great!

  I had quite a hard time placing that background correctly 😅 But I had help from people in the community and that's how I did it:

  background-color: var(--Dark-cyan);
  background-image: url("./images/bg-pattern-top.svg"), url("./images/bg-pattern-bottom.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: right 52vw bottom 35vh, left 48vw top 52vh;
  

  I hope it helps!

  0
• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted 11 months ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  • Firstly, remove the defined width from the <article> tag (e.g.: width: 1440px;) since it should take up 100% of the screen width and adapt to any device.

    Next, use the following code to position the elements:

     background-position: right 52vw bottom 35vh, left 48vw top 52vh;
    

    This positions the two elements separated by a comma, and using vw and vh ensures they resize appropriately regardless of the device.

  • Additionally, I recommend swapping the <main> and <article> tags. The <main> tag should represent the main content of the document and should not be nested inside an <article> tag.

  I hope you find it useful! 😄

  Happy coding!

  0