Responsiveness question


I am just really starting to learn about responsiveness now, so unsure of quite a few things.

I am working on a project (pen attached) and I need to design the desktop view (done, but looks distorted in the viewer since the image is not in codepen) and the mobile view (which consists of the image on top of the text).

I realise that I may be answering my own question, but in order to ‘make’ the mobile view, it simple is a matter of media queries etc. - is that correct?

I don’t need to create separate files?

At the moment, when I try to resize the browser, I am limited by the width of the main container and it’s margin and can’t make the browser smaller than that - I guess this will change when I adjust if for responsiveness?

And can I change what is currently visible to the mobile view using media queries alone? I.e. no separate file creation?

Sorry if it seems obvious, but as I haven’t done i before, I have a few doubts.

No, you don’t need to have separate HTML/CSS files. You can use the same HTML for both views and then use CSS media queries and such to rearrange the display of the HTML for the different views.

My suggestion would be to start with mobile view first and then add media queries for the desktop view. Personally, I think that is easier to do, but not everyone agrees and it isn’t required that you do it that way.

great, thank you. I think I remember Kevin Powell suggesting mobile first too - I will give it a try.