@imLumarq
Posted
Hi @Ali-El-Shoraa
Congratulations on completing this project.
1.I would suggest using the "em" unit for your media queries.
/*your code*/
@media (max-width: 767px) {
.box { in that one
flex-direction: column;
}
}
/*modified code*/
/*767px*/
@media (max-width: 47.9275em) {
.box {
flex-direction: column;
}
}
2.Give this article a read: PX, EM or REM Media Queries?
3.Coding multiple media queries with the same break points is redundant in my pinion. Just use one and put all the code changes you would like to make in that one media query.
Here's my solution:
https://www.frontendmentor.io/solutions/product-preview-card-FyiG1l-E-s
I hope you find this helpful 😄!
Happy Coding!
Marked as helpful
@Ali-El-Shoraa
Posted
Thank you very much. This really helped me. On the second point, the article helped me a lot. With regard to the third point, I am used to dividing media queries so that it is below each section in the code for quick reference... Sorry if there are spelling errors or something wrongly translated because I use Google Translate @imLumarq
