Skip to content
OverviewSolutions
3
Comments
2
Raymond
@raybags-web-dev

All comments

  • Sam•205
    @suansenSubmitted over 3 years ago

    2nd try on this exercise after researching more. Any feedback on standard practices etc.. are most welcomed.

    CSS Flexbox, HTML

    1
    Raymond•105
    @raybags-web-devPosted over 3 years ago

    Hi there, i think you did fantastic actually. I only have one feedback.

    You set the max with and height for the main container and did not adjust it at specifi breakpoints like:

    • at 380px
    • at 375px
    • at 360px
    • at 320px

    All devices with the above dimentions would have a specific part of the card that would be cut off from the viewport. Other than than, your propject is on point.

    Marked as helpful
    0
  • Dan•30
    @DFO89Submitted over 3 years ago

    How did I do on the desktop version? I had a hard time keeping the contents centered on the web page even though I used...

    body { margin: auto; }

    Also, I don't know why the main image isn't working since the href works everywhere else (codepen, VS Code). Sorry, very new to front end/github/ all the things.

    display: flex, flex-direction: row

    2
    Raymond•105
    @raybags-web-devPosted over 3 years ago

    Hi there you did well. I think you did not provide the correct path to the cover image. Its not showing. I just did the same challenege. Allow me to share some feedback.

    1 Your main container is not absolutely positioned. If you open the dev tools and reduce the screensize, the whole project slides left. In your container, place this code: .container{ position: absolute ; width: 80% ; // *you could go with your preference* height: 70% ; top: 50% ; left: 50% ; transform: translate(-50%, -50%); }

    2 You need a bit more understanding about [responsive designs] and positioning. Please use this resource and learn abit more about it.

    • [responsive-designs-with-w3schools.com] (https://www.w3schools.com/html/html_responsive.asp)
    • [responsive-designs-with-MDN] (https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design)

    Goodluck.

    Marked as helpful
    1