Most themes use CSS media queries to ascertain the viewport of the device to which the page is being served up and to modify the presentation of the content to provide the best viewing experience for that screen. Insofar as the designer has made that possible.
I have to say that a fundamental grasp of CSS and at least an understanding of responsive design is going to be necessary pretty much from the start. Not trying to put you off, I’m just saying that its very easy to make things much worse very quickly, so always work on a copy of your theme and take care.
An introduction to media queries is available here:-
So how to work with Media Queries in RW themes? Well, there are options, but they all involve writing the queries (and the CSS modifications required for when that media query returns true) then somehow having those queries and CSS applied to your project. So that brings us to, simply, how to use your own CSS in a project. Some suggestions:-
Add your own CSS file. Easy, just add a line to your HEAD section referencing it. Done.
Add the CSS to the RW Code->CSS container
Lastly (and I really do hesitate to mention it as its so fraught with problems and risks), modify the CSS in your COPIED theme files. There, I said it. … but don’t do that one… as its tantamount to a ticking bomb which can explode in your face when you want to update the theme or whatever other situation you encounter later. So forget I even said that
But, having said that… you might want to at least LOOK at some of the CSS media queries in your theme. As long as you are careful and don’t break it, it can’t hurt to at least have a peek. So in your theme drawer, remember to duplicate the theme then you should be able to choose “Show Contents”. The themes container folder inside RW should open then you can try to find the main CSS files. Normally its a file called ‘styles.css’. With Split you will see that in the folder that opens. Get a decent text editor too - it’ll make your life SO much easier! As you look through the CSS file you will soon see the media queries and after a while they should start to make sense.
A word of warning… There may not be as much structure as you would like here… there could be multiple media queries for the same viewport but impacting different elements, there could be queries which overlap in terms of the viewport they execute on… the queries could be anywhere… there may well be other CSS files which also contain media queries… It varies from theme to theme, developer to developer.
Very quickly you are likely to see just why theme designers/developers deserve our respect and why their product is worth every penny of the asking price. Modern RW themes are extremely sophisticated, nuanced and carefully designed to deliver optimum render across a plethora of devices. That is not accomplished by magic, it was engineered into the theme deliberately and laboriously. Yes - frameworks help a lot here too
Have a looksee. Do your homework. Only mess with copies of things that don’t matter if they break. And experiment and TRY things. Its the best way to learn.
Best of luck.