Advice Generator

Well done completing your second challenge here! Regarding your question, I would say that if you're using max-width: ...px in your media query, then I suppose you are currently approaching your design from the desktop view and then use a media query for smaller sizes. If that is the case, try doing it the other way around where you start mobile first and then use a media query for the larger sizes when you need to. I do think it's possible to not use media queries depending on the design and situation. What I normally do is use responsive properties such as max-width and min-width instead of fixed widths. I also second Davina's idea of using clamp() as that is something I use quite a lot.

One comment I have about your solution is that, in the start instead of having a question mark, either hide that title area completely or have a loading screen. Good job once again, and keep going :)

Instead of media queries, you can try clamp().

Syntax: clamp(<min value>, <ideal value>, <max value>);

You can mix units too!

Documentation

Kevin Powell explains clamp pretty well in this video.