so i go back to my original post… how do i code for mobile first?
So you might be aware there’s an inspect element option in the browser, and if you check through the buttons, there’s a button to simulate the browser in a phone view (it even gives you a range of phone models to pick from).
You could start by having your initial layout scheme layed out with dummy content (fake picture, fake text) and see how it looks there. You want will want to use a border outline (not just plain border at least to make sense of how the containers are playing with each other.
Once you see it like this, it’s really just a matter of vertically designing it.
Here’s an exercise that might help you think about it.
Look at a famous news website. How do they style elements in phone view vs browser mode?
We’d imagine there’s “article” elements. In a phone they should probably be flat thin rectangles mainly conveying the article name, and at best a small picture. This thin rectangle takes up 100% of the screen width. You would style it so that they stack like a building. The main css (outside the media query) would aim for that.
Now, if you just have a full monitor screen full of flat little rectangles stacked it wouldn’t work. Here’s where you use the media query and you tell these elements to be bigger boxes (maybe more variety in the size of rectangles to allow for interesting aesthetic etc).
Now, figma might not be your thing, but I’d still recommend to draw this out. It will give your css more focus on what it aims to do. Again, it’s a suggestion from personally struggling to adjust complicated designs from the css alone (and watching other people squander time like that).
Try to see if you can classify the page elements here so that you have css that targets all these things. The better one gets at doing this the easier it is to manipulate the styles later.