HTML/CSS using Flexbox

Community feedback

• 

  Adarsh Pratap•5,515

  @adarshcodesPosted almost 4 years ago

  Hi @brenodt, firstly welcome to this amazing community, and congratulations on submitting your first solution.

  • As @jamie-wales said you can use the above method for the background image and its positioning.
  • Apart from the background-image the responsive is working fine.
  • Great work! no issues aroused Keep it up! Happy Coding : )

  2

  ---

  

  Breno Teodoro•115

  @brenodtPosted almost 4 years ago

  @adarshcodes Thanks a lot for the welcoming and feedback, Ardash! I still have a long way to go, but perhaps in a few months I'm able to tackle more complex projects such as yourself :handshake:

  1

  

  Adarsh Pratap•5,515

  @adarshcodesPosted almost 4 years ago

  @brenodt For sure you'll✌

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Greetings, Breno Teodoro! 👋

  Nice job on this challenge! 👏 Your solution looks pretty good and using viewport units to position the background images works great, doesn't it? 🤣

  I actually think giving the component card a fixed height and width would be a good idea to keep its size more consistent across screen sizes. The only thing you might want to do is to allow the card to decrease in size on extra-small screens (which you can do by adding width: 100% and something like max-width: 400px (or whatever width seems right) to the card). 😉

  Keep coding (and happy coding, too)! 😁

  2

  ---

  

  Breno Teodoro•115

  @brenodtPosted almost 4 years ago

  @ApplePieGiraffe Thanks for the suggestion! That makes sense, I agree that making the card size relative was a bad idea, in retrospect. I'll keep that in mind for future ventures. Have a great one!

  1
• 

  Jamie Wales•90

  @Jamie-WalesPosted almost 4 years ago

  Looks great buddy! I had major problems with the background too took me hours.

  The best version I've seen is by CedGarcia (who is a member of this site), I looked at his example.

  You don't have to set one background image, you can set two for the body, then you can position them using background-position.

  As I said not my example but when I saw it I couldn't help but note it down, elequent way of position elements in the background.

  body{ background-image: url('../images/bg-pattern-top.svg'), url('../images/bg-pattern-bottom.svg'); background-repeat: no-repeat; background-position: right calc(47vw + 15%) bottom calc(65vh - 15vw), left calc(40vw + 25%) top calc(72vh - 10vw); }

  2

  ---

  

  Breno Teodoro•115

  @brenodtPosted almost 4 years ago

  @Jamie-Wales Wow, looks like a charm! Thanks for the suggestion Jamie, I appreciate it! I, too, will remind myself of this snippet, kudos to CedGarcia, wherever he may be hahah

  1