HTML, CSS (Flexbox), JS

Community feedback

• 

  Jesús Alejandro Atao•970

  @JesusAtao96Posted almost 4 years ago

  Hello again Zach Kyman.

  The problem is the javascript, the shareBox class does not have any display attribute so it enters the else that hides the content of the share. What you should do is assign the display: 'none' attribute by default in the shareBox and shareBoxArrow class.

  Sorry for my english and I hope I've helped.

  Happy New Year ✨.

  2

  ---

  

  Zach Kyman•220

  @zky63Posted almost 4 years ago

  @JesusAtao96 That was very helpful, thanks! Your English was good as well

  0
• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi Zach,

  The content is displayed in a really strange position for me on mobile, low down the screen and I have to scroll slightly to the side. This is caused by 2 things

  • the padding on the body
  • the explicit widths on the main container (card) which is wider than my phone screen

  You shouldn't need to set any widths or heights on this except

  • min height 100vh on body
  • max width for card, once on mobile and once desktop
  • maybe width and height on the image

  And if you want to center content, don't use padding as that won't work for all screen sizes. Use flexbox or css grid instead as an easy way.

  I hope that's helpful advice, if it is please upvote comments thanks

  1

  ---

  

  Zach Kyman•220

  @zky63Posted almost 4 years ago

  @grace-snow Thanks Grace, that is all very helpful. Can I use flexbox on the body when there is only one element like in this project? I thought using margin auto would center vertically and horizontally but I can't get it to work.

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @zky63 margin auto only works to center horizontally.

  It's fine to make the body a flex item to center content on a challenge like this. Or you can place a div inside the body and put the flex attributes on that if you don't want to place on the body directly

  1

  

  Zach Kyman•220

  @zky63Posted almost 4 years ago

  @grace-snow Oh, okay- that makes a lot of sense. Thanks again for the advice

  0
• 

  Jesús Alejandro Atao•970

  @JesusAtao96Posted almost 4 years ago

  Hello Zach Kyman.

  The github link is wrong, it is redirecting to another project.

  0

  ---

  

  Zach Kyman•220

  @zky63Posted almost 4 years ago

  @JesusAtao96 Should be fixed now.

  0