How to reduce content width?

[Hulbert Lee]

Hi, I'm wondering how I can make all of my content on my site at http://howtofocusbetter.com/ (besides the header) more narrow. This includes the narrowing of the blue boxes so that they fix the sides of the text. Do you know how I can do this?

[bo5ton]

You should just be able to change the CSS of the .inner class in style.css

From what it currently is:

.inner {
width: 960px;
margin: 0 auto;
padding: 0 0 0 35px;
}

to something like:

.inner {
width: 700px;
margin: 0 auto;
padding: 0 0 0 35px;
}

That should help.
Have you considered using a flexible width? i.e. % instead of px

[Hulbert Lee]

Hi bo5ton, thanks for your feedback!

The only problem is when I change the width to 700 (from 960), I get a horizontal scroll bar on the bottom...

Is there a way to keep the content width I have right now, but have the rest of the content fit the page?

[grannygotgoat05]

Hi bo5ton, thanks for your feedback!

The only problem is when I change the width to 700 (from 960), I get a horizontal scroll bar on the bottom...

Is there a way to keep the content width I have right now, but have the rest of the content fit the page?

That is weird that you are reducing the width yet you are getting a horizontal scroll bar. Can you post all of the coding?

[Hulbert Lee]

That is weird that you are reducing the width yet you are getting a horizontal scroll bar. Can you post all of the coding?

Sure, the style.css is:

/*
Theme Name: Focus Better
Description: Theme for How to Focus Better
Author: Quinton McCamon
Author URI: [URL]http://quinton.mccamon.ca/[/URL]
*/
* {
    outline:0;
}
strong {
    font-weight:bold;
}
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
}
em {
    font-style:italic;
}
p {
    margin:0 0 20px 0;
    position:relative;
    z-index:200;
}
hr {
    width:930px;
    height:2px;
    border:none;
    background:url(images/hr.png) no-repeat;
    margin:20px 0;
}
a {
    color:#336699;
    text-decoration:none;
}
a span {
    color:#336699!important;
}
a:hover {
    text-decoration:underline;
}
h2 {
    font-size:29px;
    color:#006699;
    background:url(images/pin.png) no-repeat;
    padding:0 0 0 40px;
    line-height:37px;
    margin:0 0 20px 0;
}
h2 span {
    color:#006699!important;
}
h2.no {
    background:url(images/no.png) no-repeat;
    background-position:0 center;
}
h3 {
    font-size:25px;
    color:#234b68;
    margin:0 0 20px 0;
    position:relative;
    z-index:200;
}
h3 span {
    color:#234b68!important;
}
#content h2:first-child {
    background:none;
    padding:0;
    margin:0 0 80px 0;
}
.huge {
    z-index:0;
}
.huge img {
    margin:-150px 0 -150px -190px;
}
ul {
    list-style:disc;
}
ul li {
    list-style:disc;
    color:#fff;
    background:#168cb5;
    list-style-position:inside;
    padding:10px 20px;
    margin:0 0 15px 0;
    border:1px solid #9b9ea7;
    border-radius:6px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    box-shadow:0px 0px 24px #afafaf;
    -mox-box-shadow:0px 0px 24px #afafaf;
    -webkit-box-shadow:0px 0px 24px #afafaf;
}
#header, #footer {
    width:100%;
    background:#005e7e;
    padding:45px 0;
    float:left;
}
.inner {
    width:700px;
    margin:0 auto;
    padding:0 0 0 35px;
}
#content {
    width:100%;
    padding:20px 0;
    float:left;
}
.person {
    padding:38px 49px 52px 41px;
    background:url(images/image.png) no-repeat;
    margin:-18px -29px -35px -21px!important;
}
.add-to-cart {
    margin:30px 0 30px 20px;
}
#footer p {
    float:right;
    color:#fff;
    margin:0;
}
/* =WordPress Core
-------------------------------------------------------------- */
.alignnone {
    margin: 5px 20px 20px 0;
}
.aligncenter, div.aligncenter {
    display:block;
    margin: 5px auto 5px auto;
}
.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}
.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}
a img.alignright {
    float:right;
    margin: 5px 0 20px 20px;
}
a img.alignnone {
    margin: 5px 20px 20px 0;
}
a img.alignleft {
    float:left;
    margin: 5px 20px 20px 0;
}
a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}
.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%; /* Image does not overflow the content area */
    padding: 5px 3px 10px;
    text-align: center;
}
.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}
.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}
.wp-caption img {
    border: 0 none;
    height: auto;
    margin:0;
    max-width: 98.5%;
    padding:0;
    width: auto;
}
.wp-caption p.wp-caption-text {
    font-size:11px;
    line-height:17px;
    margin:0;
    padding:0 4px 5px;
}

[TechnoBear]

it-changed-my-life.jpg has a width of 1280px. You would be much better off inserting the text as text and adding the image as a background image.

[Paul O'B]

Hi,

Your header image is 887px wide and your "it changed my life image" is 1280px wide so that's the smallest the page can be without a scrollbar.

The "it changed my life image" should really be a background image centred in the background of a 100% wide div so that it can get smaller without holding the page up. the div would need to be outside of the main container other wise it won't stretch to the edges. i.e. finish the main centered container then start the 100% wide div and then after that start another centered container for the rest of the content.

Similarly for your header but both should use an image replacement technique instead.

Things like this should be avoided:

<p><span style="color: #000000;">With hundreds if not thousands of distractions each day, it’s becoming increasingly difficult to stay focused on any task.</span></p>

The span serves no purpose as the style could be applied to the p element directly and applied from the stylesheet and never in an inline rule (almost never -there are exceptions).

As mentioned above that design could suit a min and max-width layout if you sort out those large images. You also have a missing closing #content div.