I just want the Angular preview in my bowser to look like the mobile form factor, not the default one that just fits to the size of your monitor. Is there a way to set a limit so that new components auto fit to the set size? I tried using CSS but that did not work.
@media (max-width: 768px) { }
What are you trying to do, exactly ? If you want to see the preview, you can change the windows size using the brower settings (developer options). https://ffeathers.wordpress.com/2016/04/16/set-size-of-browser-inner-window-for-screenshots-in-chrome/
What you did in CSS won't work.
@media (max-width: 768px) { } --> @media rule targets devices with a maximum width of 768 pixels. Any CSS rules placed inside the curly braces { ... } will only apply when the viewport width is 768 pixels or less. So if you use your PC screen, you won't notice any difference.