All comments

Sam• 205
@suansen
Submitted almost 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-dev
Posted almost 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
@DFO89
Submitted almost 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-dev
Posted almost 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

Raymond

All comments

CSS Flexbox, HTML

display: flex, flex-direction: row