I’m still using RW8 with the Sno3 theme from SeyDesign. I understand that in RW8, site width is set by the theme style. However, when I check theme properties, I don’t see any setting to set the width.
How can I change my site width?
Hi @nemesys,
If the theme doesn’t support setting your own site width, then you can’t change the site width using the standard controls.
If you publish your site and take a look at the code (if you’re comfortable with that), you can find out where the site width is set by the theme in CSS - it’s usually a div that contains the rest of the site, so it’s located near or at the very top of the body section of the code.
You can then target that div using CSS in RapidWeaver and override whatever value the theme gives it by default.
You’ll have to play around with it though, as it’s possible other elements derive their values from that div and might look distorted or spaced out too much.
You enter custom CSS in RapidWeaver here:
If you’re not comfortable with that, or have no clue what I’m on about, please publish your site somewhere and share the URL here. We can have a look and write the code out for you and post it in a reply. You’ll then only need to copy/paste it in to RapidWeaver and presto 
Cheers,
Erwin
Thank you @Heroic_Nonsense . I will check it out.
@Heroic_Nonsense : I had a look at the body section of the code and I can’t find any width following the <div> directive:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-4W878M2RCK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-4W878M2RCK');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="synchronization" content="synchronization" />
<meta name="synchronisation" content="synchronisation" />
<meta name="iOS" content="iOS" />
<meta name="macOS" content="macOS" />
<meta name="watchOS" content="watchOS" />
<meta name="second life" content="second life" />
<meta name="ipad" content="ipad" />
<meta name="iphone" content="iphone" />
<meta name="ipad" content="ipados" />
<meta name="iphone" content="iphoneos" />
<meta name="description" content="Home page for Nemesys Software" />
<meta name="robots" content="index, follow" />
<meta name="generator" content="RapidWeaver" />
<link rel="apple-touch-icon" sizes="167x167" href="https://www.nemesys-soft.com/resources/NewLogoNemesysLogoOnly%20167px.png" />
<link rel="apple-touch-icon" sizes="180x180" href="https://www.nemesys-soft.com/resources/NewLogoNemesysLogoOnly%20180px.png" />
<link rel="apple-touch-icon" sizes="152x152" href="https://www.nemesys-soft.com/resources/NewLogoNemesysLogoOnly%20152px.png" />
<link rel="mask-icon" href="https://www.nemesys-soft.com/resources/NewLogoNemesysLogoOnly.svg" color="rgba(255,255,255,1.00)" /><link rel="icon" type="image/png" href="https://www.nemesys-soft.com/resources/NewLogoNemesysLogoOnly%2032px.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://www.nemesys-soft.com/resources/NewLogoNemesysLogoOnly%2016px.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://www.nemesys-soft.com/resources/NewLogoNemesysLogoOnly%2064px.png" sizes="64x64" />
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Nemesys Software">
<meta name="twitter:description" content="This is the homepage for Nemesys Software.">
<meta name="twitter:url" content="https://www.nemesys-soft.com/index.html">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Nemesys Software">
<meta property="og:title" content="Nemesys Software">
<meta property="og:description" content="This is the homepage for Nemesys Software.">
<meta property="og:url" content="https://www.nemesys-soft.com/index.html">
<title>Nemesys Software / Logiciels Némésys</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link rel="stylesheet" type="text/css" media="all" href="/rw_common/themes/sno3/consolidated-0.css?rwcache=733938723" />
<!--[if lte IE 9]><style>#pageWrapper{opacity:1.00;}</style><![endif]-->
<noscript>
<style>#contentWrapper #fs, #sidebar #fs, #contentWrapper div[id*='myExtraContent'], #sidebar div[id*='myExtraContent'] {display: block;}</style>
</noscript>
<link rel='stylesheet' type='text/css' media='all' href='rw_common/plugins/stacks/stacks.css?rwcache=733938723' />
<link rel='stylesheet' type='text/css' media='all' href='files/stacks_page_page0.css?rwcache=733938723' />
<script type='text/javascript' charset='utf-8' src='rw_common/plugins/stacks/jquery-2.2.4.min.js?rwcache=733938723'></script>
<script type='text/javascript' charset='utf-8' src='files/stacks_page_page0.js?rwcache=733938723'></script>
<meta name="formatter" content="Stacks v5.1.2 (6312)" >
<meta class="stacks 5 stack version" id="com.stacks4stacks.stacks.extracontentplus" name="ExtraContent Plus" content="1.0.1">
<meta class="stacks 5 stack version" id="columns" name="2 Columns (Stacks 2)" content="3.0.0">
<meta class="stacks 5 stack version" id="com.stacks4stacks.stacks.freestyle2" name="FreeStyle 2" content="2.3.5">
</head>
<body>
<div id="top"></div>
<div id="fixedcontainer"></div>
<div id="pageWrapper">
<div id="socialBar">
<div class="container">
<div class="padding">
<div id="extraContainer1"></div>
</div>
</div>
<div id="socialBarBackground"></div>
</div>
<div id="socialBarSpacer"></div>
<div class="spacer"></div>
I also checked what I think is the main CSS file in rw_common/themes/sno3/consolidated.css and it’s just an optimized version of a CSS file that is extremely hard to read:
@media only print {/* A list of dividers and elements we do not want printed */#nav, #banner, #blockNav, .raftNavWrapper, #breadcrumb, .ecName, #logoLeft, #logoRight, .spacer, #headerLogo, #headerSearch, #navSearchContainer, #bannerSearch, #sideSearchTop, #sideSearchBottom, #contentLogoTop, #contentLogoBottom, #breadcrumbcontainer, #footerNavigationLinks, #backToTopWrapper, #socialBar, #sno3NavBarWrapper {display: none !important;}#pageHeader,#siteTitle h1,#siteSlogan h2 {display: block;position: relative;height: auto;font-size: 12pt;}#main {-webkit-box-shadow: none !important;-moz-box-shadow: none !important;box-shadow: none !important;border: none !important;font: 12pt/1.3em "Spranq eco sans", "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;}#contentContainer #content { margin: 0px; float: none !important;width: 100% !important;}#aside {margin: 20px 0px 0px;padding: 0px;float: none !important;width: 100% !important;}#aside #sidebarTitle h3 {line-height: 1.00em;font-size: 14pt;padding: 0;margin: 0;}/* Makes links blue */a, a:visited {color: #0000ff;}/* Prints URL's after links */a:link:after,a:visited:after { content: " (" attr(href) ") ";font-size: 90%;}/* Puts padding above the footer */#footer {padding-top: 20px;}body {color: #666666;background-color: #D9D9D9;}a {color: #0080FF;}a:visited {color: #0080FF;}a:hover {color: #0080FF;}a:active {color: #0080FF;}/* Prevent Bootstrap buttons inheriting link colours */a:visited.btn {color:
So, I’m a bit at a loss as to where the site width is specified. In my previous post, @willwood mentioned something in the CSS:
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
But I tried to change some values and they had no effect when switching to visualize mode in RW. I understand that the above is to specify a minimum width if the screen is smaller than some arbitrary values but that doesnt’ seem to specify the site’s width. I tried to change the last min-width from 1200px to 10000px, thinking that almost every screen would be smaller than 10000px and then set the max-width to 1200px but this had no impact on the site’s width.
I don’t know what to do.
The width of the white section on the homepage on that website is determined in a div with the id contentContainer
The value currently is 1110px on desktops.
In order to change this width, you’ll have to add the following code to RapidWeaver:
.contentContainer {
width: 1600px; !important
}
(you can of course play around with the 1600px - this is just an example)
You add the code here:
Cheers,
Erwin
.container is a Bootstrap class. At a guess, I think that is where your current break points and max-width CSS declarations are coming in from.
This gets complicated (compounded by trying to look at minified source code) and you probably don’t want to be applying fixed width overrides on the container element IMO. First and foremost, it will likely lock the page at a fixed width and force users on narrower screens to scroll the page horizontally.
In summary, unlike a max-width, if you use a width declaration with a value of say 1110px, the page will always be set at that width and will never scale down.
My latest copy of Sno3 (version 10.2) appears to handle widths differently to what you have in your theme or website.
I am seeing a list of different page max-widths in 50px increments you can choose from in the settings:
Page Max-Width is the third group from the bottom, in the theme style settings for me:
I can’t determine what version of the theme you have chosen to use, but it looks older compared to what I have. I can see a couple of other things in your website source code which are older or which got removed, the last time I published updates on these SeyDesign themes. For example, Nivo Lightbox, FitVids and Retina.js got removed about 4-5 years ago.
Width is typically one of the settings I have tended to add in all my premium themes over the years. It’s possible this is a setting Sno3 gained in an update.
You will probably find that using built-in theme settings is quicker and easier, unless you are trying to do something more advanced with the theme. These settings put the “rapid” back into “RapidWeaver”. 
Thank you @Heroic_Nonsense ! Would that impact the width when viewed on a smartphone? Right now, the site will squeeze to make it more useable on a smartphone screen.
Hello and thank you @willwood !
You know, almost 3 months ago, I had a hard disk failure. I was able to recover most of the content from a backup but now, It seems I did recover an older version.
From within RapidWeaver, when I right-click on the Sno3 theme and choose “Show in Finder”, it shows me one in Group Containers/P97H7FTHWN.com.realmacsoftware.rapidweaver/Library/Application Support/Addons/Themes, which is copyrighted by yourself but is version 9.0.0, so it seems I don’t have the most recent version. I’m not sure why there is another version of the themes in ~/Library/Application Support/RapidWeaver/Themes, perhaps a left over from older versions of RW?
@willwood , I did retrieve older emails that we did exchange a few months ago. Unfortunately, the DropBox link for the most recent version of Sno3 is dead. Is it possible for me to download it from somewhere?
Hello.
I added the code as you suggested under the CSS tab of the Code section:
But it doesn’t have any effect on the width, at least when I preview the site in RW.
Hi @nemesys,
You’re right, as that div is limited by two other divs that it’s nested in, who both also have a width of 1110px. Sorry - I didn’t notice that when I looked at the source code earlier.
In order to free up enough space so that the contentContainer div can expand, you’ll need to set the width of these two divs too (or go with the newer version of the theme like Will suggests, which gives you manual control over the viewport width).
Anyway, to free up space, you’ll need to add this cde to the CSS):
.container {
width: 1600px !important;
}
.main {
width: 1600px !important;
}
.contentContainer {
width: 1600px !important;
}
Again the 1600px is an example value that you can play around with.
This code replaces the code from my previous reply.
Cheers,
Erwin
@Heroic_Nonsense In each code example you’ve posted, the semicolons are on the wrong side of the important declarations.
A semicolon terminates the current property and its value. Effectively telling the web browser the point at which each CSS rule finishes. With these syntax errors, the CSS code is likely to get ignored by the web browser. Currently the web browser is reading your code like…
!important width: 1600px;
…which it does not know how to interpret. The placement of that semicolon is extremely important. The difference between the code working and not.
Whoa… you’re absolutely right!
I’ll go and change my post…
Cheers,
Erwin
That doesn’t seem to have any effect, again, both in preview in RW and printing page to Safari:
Here is the code I used:
@willwood : any way I could download the latest version of Sno3 from somewhere?
I think you will want to check first that you don’t have multiple versions of Sno3 already installed in the addons folder. See the chapters in my user guide about theme management and how to install new addons, for some good pointers.
Given that you have had serious computer / hard disk issues in recent months, it’s entirely possible you have multiple versions of Sno3 installed. And RapidWeaver is only showing and applying version 9 for you. That would be an older version of the theme without width settings.
There definitely is a newer version of Sno3 that has a full array of width settings (see my screenshot above). I can’t help but think that is going to be easier for you, compared to going round-and-round in circles trying to hack something with CSS code, which may or may not work. Choosing a desired width in the theme will be a lot quicker and easier for you.
If you need Sno3 10.2, you will need to send me an email. Anything I sent you more than 7 days ago will be expired.
It could also be that if you showed me a website built using Sno3 9, then that was the copy I sent you back to you. I try to match version numbers to the versions people need, to avoid things breaking.
I’d need to think of a way to make these themes available somehow for people still needing them or wanting my support or updates. They sold in such few numbers, that it is not justifiable for me to create shopping cart links, product pages, trial versions and demo sites for each theme. We perhaps need to consider some type of LTS (long term support) package that people can buy from me, for a sensible price.