Responsive Layouts adding Margins

[robinantill]

I've created a Responsive layout (to fit a screen 1024px wide) using Design Wizard. I want left and right columns. I then took a look at the design in site preview and find the web page fills the whole screen but the left and right columns are set in from the side by about 100px. This reduces the main content section too much which I require to be at least 700px wide.

I then went to Site Options - General settings and set the Width for Main Area as 700px. I set width for Side Bars at 162px and Overall width of web page at 1024px but the left and right columns are still set in from the sides by about 100px.

I believe that with responsive layouts you should not use fixed sizes but percentages. In that case I would like the Main Area to be 70% and the Side Bars at 15%.

Is there anything obvious I'm missing?

I just tried setting just the Main Area to be 700px with not settings for Left and Right Columns. All that does is to drop the Left Column below the Main Area. How do I make sure the Main Area is 700px or 70% wide? Any ideas.

[Phil H]

Responsive Layouts adding Margins

Hi Robin,

I am not an expert and sorry if you know or have done this all already. I suspect you may find the layouts you select are adapted (position, size, colour, font, etc etc) in CSS for different screen sizes using media queries. It is not longer quite as simple as adjusting something in Site Options or elsewhere, but a bit of that and CSS.

I would suggest, several backups, if you can and your on business plus if you have it, make a test site with the site snapshot you are working on. Then open the test site in Design view, right click in the preview window on the object you want adjust, then that will bring up the correct layout for it, bottom mid-right. Click on the name to open the code in that layout. You might see some additional style or position settings in there or you might see a "class". Copy the name of the class, click on Current CSS button at the top of the view panes but below the upper sellerdeck menus. CSS opens, control F or right click find, paste in the class name and look for it but be warned it may be in more than one place under different media queries. Start reading. FInd out which bit affects what you are looking at. Think through what needs to change to make it work. If you don't know what your reading you can find out a lot through w3schools and Mozilla Development Network MDN. If you are in a test site, change what you think might make a difference and see if it does. If not, reset it to is original value, Repeat with your next thing until you find out what makes the change you want.

I hope this helps, but if it does not, sorry.

Cheers and good luck.

Phil

[robinantill]

Hi Phil,
Thanks for your reply. I agree with you that's it's not as simple as just changing a couple of items in the style sheet due to the media queries. Your idea are good and make sense. And making a backup and practicing on that enables me to try different things.
Regards,
Robin