Hi! @abdellahelaajjouri
I didn't looked at your code and saw that you added two media queries.
I started mine mobile first, as you did. However, I only used one media query.
My process:
I start the simulation for a very small device, such as the galaxy fold.
I add all my HTML with semantic tags only adding and only adding divs where needed for styling.
In the CSS I start working from the inside out, so fonts and colors and then container. I used flex or grid depending on the project to place items within the container.
I remind myself the browser already has some responsiveness built in.
I try to avoid using fixed widths as much as possible and don't usually add a height. I use min() and max().
In responsive mode, I slowly increase my window size adjusting the values for min() max() as I go where needed.
Then if things start to break I use a media query.
I remind myself that with the challenges, we don't know how it should look at every size, so long as it still looks nice In the sizes in between, I don't worry too much.
I don't know how to avoid media queries entirely, and sometimes go media query crazy as I try to patch things up 🤣 but I think my process is helpful most of the time.
Marked as helpful
@abdellahelaajjouri
Posted
Hi @perezjprz19, I realy appreciate you putting so much of your valuable time to helpe me. This feedback is going to Improve my process so as my code . Thank you so much .