responsive design 1 #1
Conversation
There was a problem hiding this comment.
Minimum Viable Product
- Review each design file. Notice the subtle differences between them all.
- Insert a
viewportmeta tag into the head of the project with these html attributes:content="width=device-width, initial-scale=1" - Introduce max-width media queries into your project at 800px and 500px
- Do your best to make your styles match the design files at each breakpoint
Comments
All in all, good job! 🎉 The only crazy thing that is happening is the logo disappears in tablet mode. Also check out my comments.
|
|
||
| .details{ | ||
| display: flex; | ||
| justify-content: space-around; |
There was a problem hiding this comment.
The margins on details seem to be inconsistent with the rest of the page. That might be because you are using space-around, which would put space between the first and last elements within the flex container. Try space-between instead.
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
| nav :nth-child(7) {order:1;} |
There was a problem hiding this comment.
The logo disappears in tablet mode. Not sure what the cause of it is, through try adding width: 100%; or otherwise messing with the size of the image, as the image is on the page.
My console also says something about flex-shrink. Maybe flex-shrink shrank it too much?
| } | ||
|
|
||
| nav img{ | ||
| padding: 10px; |
There was a problem hiding this comment.
Apparently putting padding on images distorts them. Assume the image's content extends all the way to the portal and use margin instead.
| margin-top: 20px; | ||
| } | ||
| .App-dev .ios { | ||
| border: 1px solid black; |
There was a problem hiding this comment.
Next time, use comments to specify if a part of the CSS is being applied to the another page (since this CSS file is providing styles to two pages, index and about). That would make this more readable.
@Mister-Corn