@ErayBarslan
Posted
Hey there, excellent work on this one! Some suggestions to improve the solution:
- Between
500px
and1000px
content overflows out of screen. You can fix this by changing the media-query. - If the page contains article/text in it, you'd always want to set a max-width on the container so a user with huge screen still has a good reading experience. Otherwise you'd end up having 1 line paragraphs. With a little refactor you can use:
body {
...
justify-content: center;
}
/* Container isn't centered horizontally as it is. You can add justify-content */
.div__card {
...
max-width: 680px;
}
/* This matches the design and have a better visuals for both mobile and desktop */
@media (max-width: 980px) {
...
}
With these changes your page becomes fully responsive for all screens. Also I'd suggest designing mobile-version first. It's a personal preference after all but general convention is to start with mobile version and I find it much better approach. You'd prevent any possible overflow since your base CSS is for small screens. Also desktop layouts happen to be more complex. With desktop first approach, we're simply removing the complexity; but we wouldn't need this with mobile first design. Happy coding :)
Marked as helpful