Profile Card with CSS Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  Hey about your question in position: relative well, we usually use them when we want a child element of it, to be relative to its parent, especially when the child is absolute. If you want more pixel tweaking like adjusting right, well you could just make use of transform: translate property, to align your element in the x and y-axis, that way you could avoid positioning it relative. Well nothing wrong with that, margin also is one way of aligning. One more thing, upon seeing your markup, we only use 1 h1 tag per page and I saw you use a few of them and that is not recommended. 1 h1 per page so that semantic of our markup will be clear ^^

  2

  ---

  

  Maksym Novikov•60

  @MoranGuyPosted over 3 years ago

  @pikamart Thank you kindly for your suggestions! So, if it's considered a bad practice to use more than 1 h1 element per page, should I better use p with span for styling? I'm talking about 80K 803K and 1.4K text in this matter.

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted over 3 years ago

  @MoranGuy div is just fine since p is for paragraphs right but we can use of course. For span well I don't usually use span when I want to style an independent element, I use span when there is part of my paragraph that I want to be style. But still you can use them^

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  Hey, Maksym Novikov! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Nice work on this one! 🙌

  I'd like to suggest using CSS background images to add and position the background images in this challenge. It'll keep those images out of your HTML, which will make your markup slightly cleaner, and I think it's easier to manage the images and CSS background images, then. 😀

  As a tip—if you use viewport units (such as vw and vh) to position the background images, you can position them in such a way as to minimize the change in their position when the screen is resized. 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Maksym Novikov•60

  @MoranGuyPosted over 3 years ago

  @ApplePieGiraffe Thank you for commenting! Images were a little hard for me to work with on this project. For your suggestion: can I add more than 1 background image to an element? And if I can, how can I style them separately? Could you please elaborate more on this subject? =)

  1

  

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  @MoranGuy

  Sure thing! 👍

  You can add more than one background image to an element using CSS background images by separating each image with a comma:

  background: url(path/to/image-1), url(path/to/image-2);
  

  From then on, you can separate different sets of other background-specific with commas, too, to style each of the background images separately:

  background-size: 100%, 50%;    /* 100% is for the first image, 50% is for the second image */
  

  Check out this great article from CSS Tricks or this article from Ahmad Shadeed in order to learn more about using multiple CSS background images.

  Hope that helps! 🙂

  1

  

  Maksym Novikov•60

  @MoranGuyPosted over 3 years ago

  @ApplePieGiraffe Wow, thanks a ton! I didn't know that. I'll be sure to try and implement that in my future projects =)

  1