All comments

• 

  Segundo Juan•95

  @JSegundoSubmitted about 3 years ago

  I think i did pretty well and i´m proud. tell me if i can do something better. I notice that the img is not displayed since i uploaded the code to GitHub pages. do you know why?

  UPDATE: I fix the img thing(thanks Vinay Puppal). Then I uploaded the code not by pushing from the console, but by uploading the files directly in GitHub. Now the card its bigger and idk why!

  

  HTML & SCSS

  2

  31
  

  Vinay Puppal•160

  @vinaypuppalPosted about 3 years ago

  Hey, seems like it's trying to load from https://jsegundo.github.io/images/image-header-mobile.jpg instead of https://jsegundo.github.io/FE-Mentor-card/images/image-header-mobile.jpg.

  The reason is you referenced it from the root folder in your style.css i.e /images/image-header-mobile.jpg instead of ../images/image-header-mobile.jpg

  This may have worked locally because / points to your project folder but in GH pages / does not point to this project repo folder.

  I hope this is clear if not let me know.

  Marked as helpful

  0

  This comment has received 1 replyShow
• 

  Jan Blahout•70

  @JanBlahoutSubmitted about 3 years ago

  Hi,

  I had quite a struggle with this one but when I look at it now, it was pretty much straight forward. I had so many moments that I wanted to quit. I am getting little bit lost in the flex box, padding and margin.

  When I do media query at 1035px (max width) .container { flex-direction:column} only part of the image can be seen. What is the reason ?

  Anyways, any tips and tricks are welcome.

  

  CSS HTML. The hustle begins

  1

  10
  

  Vinay Puppal•160

  @vinaypuppalPosted about 3 years ago

  Hey, I hear you. Flexbox can be a little hard to start with, for me, this video series from wesbos helped me to understand it easily.

  Regarding you question, the reason is because of overflow: hidden and max-height: 446px; on .container class.

  1
• 

  Abdul•255

  @abdulrahman-rwimSubmitted about 3 years ago

  it's been a while solving challenges and coding.

  

  responsive card using sass

  2

  30
  

  Vinay Puppal•160

  @vinaypuppalPosted about 3 years ago

  Hey, looks good. Take a look below 370px,

  1. The card is touching the edges adding some padding around the card should fix it.
  2. The attribution text is overlapping with card

  Marked as helpful

  1

  This comment has received 3 repliesShow
• 

  César Palma•425

  @xsrpmSubmitted about 3 years ago

  Would you have a feedback for me about the button when I clicked? Any comment is welcome.

  

  grid, flex, position relative/absolute, z-index

  2

  10
  

  Vinay Puppal•160

  @vinaypuppalPosted about 3 years ago

  Hey, overall your solution looks good. Few suggestions

  1. Make sure vertical align the card.
  2. Add some box-shadow to the card
  3. Check some HTML and ACCESSIBILITY issues reported here
  4. Add padding around the card for small screens(i.e below 330px), at present it's touching the edges of the screen

  Marked as helpful

  1