Good afternoon!
I am having a hard time fully grasping MediaQueries and how to use them to accommodate specific sizes of viewports (ex: what to set widths and heights at when creating the container in CSS). Does anyone have a good resource that could help expound on this subject?
Thank you,
Lindsay
This one is pretty good:
My suggestions (which basically are the same as this article):
- Use a ‘mobile’ first approach. In other words, start narrow and work your way out. Narrow your browser as far as it will go and design your page to look good at that width. This will be your base CSS.
- After you have the narrow width version styled (no horizontal scrollbar!) then start widening your browser until you come to a good spot where you have enough room to rearrange elements on your page for a wider view port. This will be your first break point (you will use min-width and ‘em’ units to define it). The reason to use ‘em’ is because it will take into account both view port width and text size. If you use ‘px’ then it will only take view port width into account and people viewing your page with larger text sizes will get a sub-optimal experience.
- Keep widening and add more breakpoints as needed. Different elements on your page may need different break points. The point is that you are letting the content tell you where the break points are, not using some predefined widths you found somewhere on the web
