I am confused, in the older versions there was only one way to do this but now every separate item has a place in the design column. Should I use styles.css or pull-down the respective column which I need to edit?
Your question is too ambiguous to answer. What is it exactly that you are trying to do? What do you mean by "design column?" There is a design TAB in the lower right of the workspace which shows all the project assets.
Should I use styles.css or pull-down the respective column which I need to edit?
Again, what do you mean by "pull-down the respective column..." Columns are page components. They can't be "pulled down." Styles.css is the user-editable stylesheet that's created automatically when you start a new project. You add your custom CSS to this stylesheet. Media queries are applied to CSS classes. They can be applied to any class, in any user stylesheet.
I was going to write this all out but seriously, read and go through the tutorials. There's a specific section on how to do media queries.
As for where to have them added, be sure to use the pulldown arrow at the top of the Styles window with the word Create to the left of it. Choose the style sheet you want to use and it will add class to your window, you can delete that class if you like. That choice will tell it which file to add your media queries to, which is typically your styles.css if that's where you put your custom css classes. You should do that pulldown choice each time you open a project so it tells it which one to default to. That default stays until you change it. Anything you choose there becomes the current default for the session/project.
Hi there, thanks for your help and let me apologise for not explaining properly. In the 'Design Tab' in the older version, there was only styles.css which you used to adjust your design to get the responsive site needed as you went down to 300px. Does that mean the list of items I have on the design tab must be left alone and I must use 'Styles.css'?
Let me tell you what happens to me on the site I am writing for practice. I design the site on 1200px and save. I then go down from there to all of the other sizes using @media and alter where needed until I end up at the 300px size. I then check the site as I go up the sizes until I get back to 1200px. They are all correct as I go up. I then save and get a preview and am shocked to see two massive gaps between two of the units on the site. As I see it this top page does not need to be addressed by @media. I then revert and start at 300px and go up and the same gaps occur when I preview. I don't know what I am doing wrong. Please help!!
Thank you, Ray
Can you post a link to the page, and/or provide us the project file? Much easier for the rest of us to help if we can actually see what you're talking about.
As for the responsive, you're going to find that a lot of the responsiveness may already be there before you do anything to your site for media queries so you should always check first to be sure. Do remember that the sites are now set up as Mobile First so the main settings apply to the smallest screen size and work their way up.
I'm sure if you can post a link to the actual page, one of us can quickly identify the problem you're having.