Skip to content
OverviewSolutions
8
Comments
4

Vinay Puppal

@vinaypuppalINDIA160 points

I am a Javascript developer from Hyderabad, INDIA. At present, I work as Fullstack Remote JavaScript Developer at https://rapidsec.com

I’m currently learning...

Rust Python

Latest solutions

View more solutions

Latest comments

  • Vinay Puppal•160
    @vinaypuppal

    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
  • Vinay Puppal•160
    @vinaypuppal

    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.

  • Vinay Puppal•160
    @vinaypuppal

    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
  • Vinay Puppal•160
    @vinaypuppal

    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