Specifying fixed web page width breaks layouts

[brucet]

If you fix the value of 'Width For Main Area' then you need to set corresponding values for 'Width of sidebar(s) in pixels' and 'Width of web pages in pixels', and vice versa. See the section "The 'Themes' Window" in the main help for some example values.

If your aim is to disable the responsive behaviour, this can be done simply by setting 'Adapt Page Layouts To Screen Size' to 'False', under ‘Appearance Settings’ in the ‘General’ tab of the Site Options. This setting is also documented in the same section of the help.

[graphicz]

That's not what I want at all. Just a responsive site that is not 100% wide in desktop.
960px seems to be a pretty standard width for responsive frameworks in desktop

[brucet]

If you want a responsive site that is not 100% wide in desktop (ie the page width reduces on small screens, but never grows above a certain size) then the method in the help, which I just described, will give you that. The following values seem about right for an overall width of 960 px

Width For Main Area: 660
Width of sidebar(s) in pixels: 150
Width of web pages in pixels: 960

If you change the sidebar width then you will need to make an equal and opposite change to the Main Area width; or double, if you have two sidebars.

[John Ennals]

Using the Smart theme, setting a desktop maximum width of e.g. 960 pixels while keeping the site fully responsive seems to be just a matter of specifying

.bulk-area {max-width:960px;}

and leaving Site Options width settings for Main Area, Sidebars and Web Pages blank.

Here are instructions for doing this:

Back your site up first.
In Design Library | Variables, create a new variable called WebPageMaxWidthRWD. The easiest way to do this is find WebPageOverallWidth in the Site group, copy it and rename it.

In Settings | Site Options | General | Site, set WebPageMaxWidthRWD to the maximum width you want your site to be on a desktop display, e.g. 960. Ensure that ACTSTDWITH, WebPageOverallWidth and WebPageSidebarWidth are all blank.

In the Current Stylesheet (Smart Responsive Stylesheet) find .bulk-area – probably on line 247. You’ll see 2 sets of BLOCKIFS. Under the second /BLOCK (line 256) insert the following code:

<actinic:block if="%3cactinic%3avariable%20name%3d%22WebPageOverallWidth%22%20%2f%3e%20%3d%3d%20%22%22%20AND%0d%3cactinic%3avariable%20name%3d%22WebPageMaxWidthRWD%22%20%2f%3e%20%21%3d%20%22%22" >
max-width:<actinic:variable name="WebPageMaxWidthRWD" />px;
</actinic:block>

Then publish the site. The bulk areas of the pages will not exceed the maximum width but will still collapse properly. Note that the header and footer areas are still full width; you can make them the same width as the bulk area by amending the Smart Responsive Stylesheet at Line 30 onwards to:

#wrapper {width:auto;max-width:960px;margin-left:auto;margin-right:auto;}
.subHeader, .header-area, .footer-area {
	width:100%; 
	max-width:<actinic:variable name="WebPageMaxWidthRWD" />px;
	margin-left:auto;
	margin-right:auto;
	padding:0;
}

John

[feemish]

Hi John,

What's the advantage to doing it this way as opposed to changing the site options : general layout tab as suggested by Bruce above? Am I missing something?

[John Ennals]

The advantage - which I rather stupidly omitted to mention - is that it works on Smart sites that have a mixture of one-sidebar and two-sidebar pages, as described in Louise's post here:

http://community.sellerdeck.com/showthread.php?t=55983

John

[feemish]

ah ok thanks!

[feemish]

I adjusted my page width exactly how described by BruceT above, and noticed on shrinking the page in a browser, the categories list appears off centre.

See attached image.

I then tried the method described by John Ennals and the categories list is nice and centered. See image.

I dont know if BruceTs method would cause off centered categories on laptops and mobiles as I could only check by shrinking my browser.

[feemish]

Hi John, Do you know how, using your method, I can now make both sidebars the same width? as the right sidebar is wider.

[feemish]

Yes sorry, you are correct.
Does anyone know how to keep the sidebars equal in width?
(Its another detail in the responsive theme I find annoying.)

[John Ennals]

Symmetry is overrated

[feemish]

LOL!

I think if you're a graphic designer with mild ocd you might disagree

[feemish]

This one is annoying me more!

When using the maximum width in desktop as described by Brucet below, the categories menu on smaller screens becomes off centered (see attached image).

Doe anyone know which bit of code controls that?

If you want a responsive site that is not 100% wide in desktop (ie the page width reduces on small screens, but never grows above a certain size) then the method in the help, which I just described, will give you that. The following values seem about right for an overall width of 960 px

Width For Main Area: 660
Width of sidebar(s) in pixels: 150
Width of web pages in pixels: 960

If you change the sidebar width then you will need to make an equal and opposite change to the Main Area width; or double, if you have two sidebars.

[malbro]

This one is annoying me more!

When using the maximum width in desktop as described by Brucet below, the categories menu on smaller screens becomes off centered (see attached image).

Doe anyone know which bit of code controls that?

Virtually all the code to control this is in the two layouts at the beginning of the style sheet with the name Responsive. The Sellerdeck V14 responsive system relies on @media in the css code, you can find the contents of the two layouts under Design Library Layouts in the Themes section.

[feemish]

thanks for pointing this out.