Hi, I am brand new to bootstrap studio. Maybe I'm not understanding the program's architecture yet, but I'm having a hard time modifying the sizes of test/heading elements across various screen sizes. For example, on mobile one heading would look best at 40px font, vs the desktop version which looks like best at, sat, 30px font.
I'm selecting the container housing the elements and can see the already existing media calls, but I am not able to edit them as they are locked. How would I be able to easily edit specific elements at specific media sizes?
You typically don't edit the pre-determined Bootstrap breakpoints. You can create new ones at any size you want if you need to.
You pretty much need to understand how to write CSS rules if you want to build responsive websites in this program. All editing is done either through the visual interface, or by writing CSS. Placing components on the page is how you "write" the HTML, and the visual tools on the upper right tabs are how you set the styling. If you can't do something via the visual interface, you write new CSS.
I would recommend you watch the tutorial videos, and build a site alongside as you watch.
Also if you want to edit the default code for any of the CSS you just copy that code to your custom CSS file and edit it there. Your custom CSS file will take precedence over other CSS files as long as you have it last in the order. That's for any css including default media queries. I would highly suggest you get comfy with the app and code first though so you know you are doing it correctly. :)