Order summary card

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Etno! 👋

  Regarding the issue that you have, you can try to make the site looks good on any resolutions by doing the following.

  • First, remove the unnecessary properties from the main element such as width, max-width, position, and height.
  • Second, I highly suggest making the body element as the main container instead of the main element.
  • Third, make the body element as flex container and then set min-height: 100vh to allow it to grow if needed. Also, give some padding to prevent the card from touching the edges of the screen.
  • Fourth, the only thing to make the card responsive is to specify a max-width. There's no need to specify width and height ( let the content inside it dictate the height of the card).
  • Fifth, there's no need to specify the height of the card image. Right now, it gets stretched. Also, you might want to make the img element as a block element and set max-width to 100%. This will make it easier to work with image element.
  • Finally, for progressive enchantments, I recommend making rem unit the main unit in the stylesheet instead of px and using classes instead of id to reference all elements that you want to style.

  That's it! I hope this information is useful and happy coding! 😄

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  I have a question, can you tell me what "cba" stands for? I've tried to search on the internet and it gives me "Central Business Activity", "Collective Bargaining Agreement", and other things that I'm sure that it's not what you mean. 😅

  0

  

  Etno Polino•180

  @EtnoPolinoPosted over 2 years ago

  Hello @vanzasetia

  Thx for the head up, i really appreciate.

  1. regarding your first point, I have some issue with what you said regarding width, height, max-width since when i put width, height respectively to 100vw and 100vh, if i dont use max-width to 100% i'll generate scroll and this not something i want, so i used max-width. and i feel like i should have to have a scroll bar on beginner project. I dont know how to do other wise.

  2. I also think that, and it's less block of css code also.

  3. Same as first

  4. i dont know how to do otherwise or else my card will be too big. im doing the FAQ Accordion Card challenge at the moment and i faced the same issue. if i dont give specific px it'll be too big, or i wont be able to set my backgound decenly because it'll go all over around..

  cba means can't be arsed. it's used when someone dont wanna bother himself putting the energy into doing something.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @EtnoPolino You're welcome!

  1. Then don't specify any width and height. If you made the body element as the container of the page and made the main element as the card element then you don't need to specify any width and height to it. All it needs is a max-width to prevent the card from becoming too large.
  2. Yes, probably.
  3. It only works if you make the main element as the card element and body element as the flex container of the card. Otherwise, feel free to adjust it as it fit your needs.
  4. Well, that's a hard challenge, especially taking care of the images. If it's too hard then probably it's best to do easier challenges first.

  About the cba, what does it mean in this case?

  Marked as helpful

  1

  

  Etno Polino•180

  @EtnoPolinoPosted over 2 years ago

  @vanzasetia

  yes, i see now, i think that's what i did with the FAQ Accordion Card challenge regarding the body and the main and no specific pixelsfor the card.

  Thx again.

  About the cba, what does it mean in this case? ==> it means that to have a responsive solution to the dimension : Nest Hub and the Galaxy Fold mobile screen i should have tried again, but i cba (cant be arsed) meaning i give up/dont care anymore.. too much energy to waste, tired, wont bother keep going with that for now.

  That's what and that's how cba is used.. it's a synonym signification of whatever... as a slang

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @EtnoPolino Thank you for the explanation about cba! 👍

  0

  

  Etno Polino•180

  @EtnoPolinoPosted over 2 years ago

  I come back to this comment regarding using px and rem because i've found out several articles saying that using px isnt that much of a big deal actually.

  https://codyloyd.com/2021/css-units/

  https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @EtnoPolino Well, I would recommend using various units (px, rem, may be em, and other units) to make the site to be absolutely responsive. You can read the following blog post by Josh Comeau to learn more about it.

  0