Responsive Order Summary Component

Community feedback

• 

  Ben Andrew Merritt•345

  @b-a-merrittPosted almost 3 years ago

  Hey!

  I think your intuition to use flex-box is spot on, but it of course cannot be used with a position: absolute item. (An absolute-positioned item is removed from the flow, and flex-box items need to be in the flow).

  One way you could accomplish this is to put your main-container div in another container, position that container absolute with a set height of 100vh and a width of 100vw, then use flex-box on the main-container inside of the new container.

  Whew! That seems to me like too much work.

  What might be better is if you used the "background-image" CSS property on main rather than displaying an HTML <img/> element. This way, you could just immediately set main to 100vh and 100vw while positioning main-container with flex-box right away.

  I think you did not do this because you wanted to display two different images - one for mobile and one for desktop. Sorry for explaining this if you already knew it, but you can use a media query to display a different image at a different screen with by using the following code in your stylesheet:

  
  main {
    background-image: url('RELATIVE_PATH_FOR_MOBILE_HERE');
  }
  
  @media only screen and (min-width: WIDTH_AT_WHICH_YOU_WANT_TO_CHANGE_HERE) {
    background-image: url('RELATIVE_PATH_FOR_DESKTOP_HERE');
  }
  
  

  If that wasn't the reason or that's not helpful, I'd be interested to know!

  Happy coding!

  Marked as helpful

  0

  ---

  

  P

  Noemi Gali•280

  @NomiDomiPosted almost 3 years ago

  @b-a-merritt

  Hey Ben,

  This was extremely useful!! I wasn't really sure which way was better when it came to adding the background image, but I am glad that I now know how to fix my issue no matter the decision.

  Thanks a lot! :)

  0
• 

  Anthony Rosman•510

  @D3press3ddPosted almost 3 years ago

  I like the shadow in the plan part, really cools, btw where did you learn css?, i want to learn the :root part and the variables that you declared, i was looking in udemy bussines account but i couldnt find a good css course updated :c hope you have a great day and happy coding💻

  0

  ---

  

  Martin Eliáš•890

  @martinelias1312Posted almost 3 years ago

  @D3press3dd Hi, i personally recommend this article for learning variables in CSS. Hope this will help you!

  Marked as helpful

  1

  

  Anthony Rosman•510

  @D3press3ddPosted almost 3 years ago

  @smradupan Thank you so much for the article, really appreciate it.

  0

  

  P

  Noemi Gali•280

  @NomiDomiPosted almost 3 years ago

  @D3press3dd Thanks a lot, but I must admit that I took the shadow from the Figma design.

  Regarding the :root part, I actually had it explained to me by one of my friends which is a frontend developer for many years now.

  But the article below posted by @smradupan does a really good job at explaining! :)

  0

  

  P

  Noemi Gali•280

  @NomiDomiPosted almost 3 years ago

  @D3press3dd I discovered a guy called Kevin Powell on YouTube and have been watching his videos. In case you still don't fully understand custom variables and how they work, watch this: https://www.youtube.com/watch?v=PHO6TBq_auI&list=PL4-IK0AVhVjOT2KBB5TSbD77OmfHvtqUi&ab_channel=KevinPowell

  He is amazing at explaining everything! :)

  1

  

  Anthony Rosman•510

  @D3press3ddPosted almost 3 years ago

  @NomiDomi Thank you so much, let me chek it, really appreciate it.

  1

  

  Anthony Rosman•510

  @D3press3ddPosted almost 3 years ago

  @NomiDomi i was watching Kevin Powell, HE IS AMAZING, i learn a lot these days, thank you so much

  1

  

  P

  Noemi Gali•280

  @NomiDomiPosted almost 3 years ago

  @D3press3dd He truly is the best! Glad I could help! :)

  1