Greetings!!
Toke me a few days, followed the design specs and looked different than the solution.
FotomaticFotomatic project page
I´ve put the meta tag:
Focused on parents paddings instead of his childs
and made alterations in the media query:
Tablet:
@media only screen and (max-device-width: 760px) {
Mobile:
@media only screen
and (max-device-width: 450px)
I did´t use “min-device-width” because the mobile has to inherit the specifications of the tablet.
Is it a good practice or should I repeat the specifications of the tablet on the mobile?
Hi, Juan!
This answer is outside the Fotomatic project, but when it comes to using max/min, each use case will depend on what you’re trying to do.
If you start small and go up, you will use min-width. If you are starting large, you will use max-width. Typically, I will start with mobile design instead of desktop and work with min-width for the queries. But there are cases where I will use max-width for my mobile menu change.
However, this project had more to do with fixing specific design problems than perfecting the design itself (though you are more than welcome to perfect it!) In the future, when you are working on personal projects, I think you will find it much easier to implement queries when the design breaks rather than when you think a certain design element should take effect or go away.
1 Like
Hi!
I used what you told me about starting small and go up. For me was so much easier. Mind blowing! I heard about it and makes total sense. It´s more easy to expand than to shink the pages. I follow your hint in the Club challenge and it was much faster than the company project. Thansk a lot! Here is my live club project:
https://juan-debali.github.io/Codecademy-Challenge-Project-Responsive-Club-Website/
Code:
1 Like