All comments

• 

  John Rey Faciolan•220

  @juani2Submitted over 3 years ago

  1. My card elements were very jarry as the viewport width as moves from wide to narrow. How can I reduce this behavior?

  2. My implementation of the cards on tablet screens were very wide, what other layouts can you suggest?

  Thank you in advance!

  

  Vanilla CSS, Flexbox, Media Query, Graceful Degradation

  1

  10
  

  Kowacka Malgorzata•50

  @kowackagPosted over 3 years ago

  Hello. I am also learning. I had the same problem as you (as for 1.) I resolved it by giving the constant height of card. As for tablet screen I ordered card in row (the same as the desktop version). Good Luck !

  0

  This comment has received 1 replyShow
• 

  Francisco Becerra Rodriguez•390

  @FranciscoFrontEndDeveloperSubmitted over 3 years ago

  In this challenge the most difficult things was to position the imagen in the center of the card, but thanks to the "calc()" function of css it made my work easier

  

  Mobile firts and sass with BEM

  2

  10
  

  Kowacka Malgorzata•50

  @kowackagPosted over 3 years ago

  Hello, I am also learning htlm i css. I looked at your code and I have one sugestion to improve positioning of image. I think that it will be better to:

  1. add position:relative for .main__contCard (thanks to that you will be able to set a imagine's position in regards to .main__contCard).
  2. Set: .contImage { position: absolute; top: 25%; left: calc(50% - 38px); - 38px it is half of image }
  3. Delete in all @media style for .contImage.

  I hope that I explained it enought clear :)

  Good luck! Gosia

  0