Skip to content
OverviewSolutions
3
Comments
2

Raymond

@raybags-web-devAmstrdam105 points

Front-end developer, enhencing user experience(UX) and responsive UI I work with HTML5, CSS, Javascript/jQuery, ReactJs, NodeJs and Bootstrap,

Latest solutions

Latest comments

  • Raymond•105
    @raybags-web-dev

    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
  • Raymond•105
    @raybags-web-dev

    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