Wells: How can I center my main content?

ToniWonKanobi · February 14, 2015

I recently switched to the Wells template from Avenue because I wanted a sidebar. Above Avalon turned me on to Wells.

My site is basically a Daring Fireball -ish type of thing.

What I would like to accomplish is to bring my content to the center. I did see this post, last updated in October of 2014. The problem with the solutions listed there is that it assumes I am okay having a super wide "content" block (where all my text goes). In fact, landofnoms has a site with an

@siteWidth

of ~1000px. That's too much for me.

Here is a screenshot of what my site looks like now:

I basically just want to move all that over so that it is centered, regardless of the size of the desktop display

(On mobile everything looks as it should, with the sidebar disappearing and

#mobileNav

doing it's thing.)

Here is the stylesheet governing the appearance of the site:

/* COLORS & BACKGROUNDS ***********************************************/
body { background-color: @siteBackground; color: @bodyTextColor; }a, a:visited { color: @bodyLinkColor; }a:hover { color: @bodyLinkHoverColor; }.main-nav {  a, a:active, .folder li a { color: @navColor; }  .active-link a, .folder li.active-link a { color: @navActiveColor; }  a:hover, .folder li a:hover { color: @navHoverColor; }  secondaryNavigation {    a, .folder li a { color: @secondaryNavColor; }    .active-link a, .folder li.active-link a { color: @navActiveColor; }    a:hover, .folder li a:hover { color: @navHoverColor; }  }}
h1,h2,h3,h4,.comment-count { color: @headingsColor;  a, a:visited { color: @headingsColor; }  a:hover { color: @bodyLinkHoverColor; }} pre {    white-space: pre-wrap;    width: 96%;    margin-bottom: 24px;    overflow: hidden;    padding: 3px 10px;    -webkit-border-radius: 3px;    background-color: #eee;    border: 1px solid #ddd;}code {    white-space: nowrap;    font-size: 1.0em;    padding: 2px;    -webkit-border-radius: 3px;    background-color: #eee;    border: 1px solid #ddd;}pre code {    white-space: pre;    border: none;    padding: 0;    background-color: transparent;    -webkit-border-radius: 0;}
/* FONTS & VERTICAL GRID***********************************************/
// VERTICAL GRID
body { .body-font; font-size: @bodyTextSize;     }h1, h2, h3, h4, h5, h6 { .headings-font; margin: 1em 0; }h1 { font-size: @headingsSize; }h2, .comment-count { font-size: @headingsSize0.8; }h3 { .headings-font; font-size: @headingsSize0.6; }.comment-count { font-size: 16px !important; }p { .body-font; margin: 0 0 1em; }blockquote {  margin: 10px 10px 18px 10px; color: #a1a1a1; padding-left: 10px; border-left:3.5px solid #dbdbdb; }pre, ul, ol, dl { .body-font; margin: 1em 0; }nav ul, nav ol { margin: 0; }
/* navigation */.main-nav { font-size: @navSize;  a { .nav-font; font-size: @navSize; display: block; padding: 0.2em; }  secondaryNavigation { font-size: @secondaryNavSize;    a { .secondary-nav-font; font-size: @secondaryNavSize; }    .subnav {      a { line-height: 1.2em; }    }  }}
.main-nav + .main-nav { margin-top: 20px; }
/* dropdown menus */.main-nav {  li.folder .subnav { height: 0; overflow: hidden; opacity: 1; }  li.active-folder .subnav { height: auto; }  li.folder > a { cursor: pointer; }  .subnav {    ul { padding: 0.5em 0 1em; }    li { margin-left: 0.5em; }    a { line-height: 1.2em; }  }}mobileMenuLink { display: none; margin: 15px 0 0; }mobileNav { height: 0; overflow: hidden; }
// HEADERlogo { margin-bottom: 30px;
.logo.site-title { margin: 0; font-size: @siteTitleSize; display: inline-block; }  .logo.site-title a { color: @siteTitleColor; }
.logo.image { line-height: 0; margin: 0; display: block; width:@logoSize; max-width: @sidebarWidth; }
.logo.image img { width:@logoSize; max-width: @sidebarWidth; }
.logo-subtitle { .subtitle-font; font-size: @subtitleSize; color: @subtitleColor; margin-top: 0.5em; }}logo .logo.site-title {
.site-title-font;}categoryNav,
.category-nav-toggle-label {  display: none;  visibility: hidden;}
.show-category-navigation #categoryNav {  display: block;  visibility: visible;}categoryNav {
ul {    margin: 0 0 @outerPadding;    .category-nav-font;    line-height: 1em;    li {      display: inline-block;      margin: 0 2em 1em 0;      &.filter {        display: none;      }      a,      a:visited {        color: @categoryNavColor;      }      &.active-link:not(.all) {        a,        a:visited {          color: @categoryNavActiveColor;        }      }    }  }}
// keeps ALL from being active color on item view.view-list #categoryNav ul li.active-link.all {  a,  a:visited {    color: @categoryNavActiveColor;  }}
/* LAYOUT (WIDTHS & PADDING)************************************************/canvasWrapper {[code]max-width: @siteWidth; 
}

canvas { padding: @outerPadding; min-width: 900px; }

headerWrapper { position: relative; z-index: 999; }

header, #page, #footer { padding: 0; }

page { position: relative; }

sidebarWrapper { display: none; }

topNav { margin-bottom: 20px; }

.sidebar-text-alignment-center #headerWrapper { text-align: center; }.sidebar-text-alignment-right #headerWrapper { text-align: right; }

/* header options */

body.sidebar-fixed { &.sidebar-position-left { #headerWrapper { position: fixed; } } &.sidebar-position-right { #headerWrapper { position: fixed; right: @outerPadding; } } #headerWrapper.absolute{ position: absolute; }}

body.sidebar-position-left { #headerWrapper { position: absolute; top: @outerPadding; left: @outerPadding; width: @sidebarWidth; } #pageWrapper, #footerWrapper { width: auto; margin-left: @sidebarWidth + @sidebarPadding + 20; }}

body.sidebar-position-right { #canvasWrapper { } #headerWrapper { position: absolute; top: @outerPadding; right: @outerPadding; width: @sidebarWidth; } #pageWrapper, #footerWrapper { width: auto; margin-right: @sidebarWidth + @sidebarPadding + 20; }}

@folderBackground: hsl(hue(@navActiveColor), saturation(@navActiveColor), lightness(@navActiveColor));@folderNavColor: hsl(hue(@siteBackground), saturation(@siteBackground), lightness(@siteBackground));

/* COLLECTIONS / PAGES***********************************************/

/* Blog */

.collection-type-blog {

&.blog-sidebar-right { #sidebarWrapper { display: block; width: @blogSidebarWidth; position: absolute; top: 0; right: 0; } .main-content { margin-right: @blogSidebarWidth + @blogSidebarPadding; } }

&.blog-sidebar-left { #sidebarWrapper { display: block; width: @blogSidebarWidth; position: absolute; top: 0; left: 0; } .main-content { margin-left: @blogSidebarWidth + @blogSidebarPadding; } }

.category-filter span:before { content: 'Articles in '; display: none } .tag-filter span:before { content: 'Articles tagged '; display: none } .author-filter span:before { content: 'Articles written by '; display: none }

article {

.engagement {
 span, a { color: @metaColor; }
 .sqs-simple-like .like-count,
 .sqs-simple-like .like-count:hover,
 .ss-social-button,
 .ss-social-button:hover {
   color: @metaColor;
 }
}

.entry-info {
 &, a { color: @metaColor;  }
}

.special-content { margin-bottom: 1em; }

// header
header { margin: 0 0 1em; }
h1.entry-title { margin: 0 0 10px; }


// body
.entry-content { margin: 1em 0; }
.read-more { display: block; }
.main-image img { width: 100%; }

// meta
.comments-wrapper { margin-top: @postPadding; }

&.promoted-block-quote .special-content {
 blockquote { .quote-font; color: @headingsColor; font-size: @quoteSize * 1.4; margin: 0; }
 .source { font-size: @bodyTextSize; }
}

} .post-divider { margin: @postPadding/2 0; height: 1px; }}

.engagement { margin-top: 10px; font-size: 0.9em; font-style: italic;

.squarespace-social-buttons.inline-style:hover .ss-social-button, .squarespace-social-buttons .ss-social-list-wrapper .ss-social-button-list { text-align: left; }

.comment-link { display: inline-block; margin-right: 1.2em; .sqs-ui-font(bubble);

&:before {
 font-size: 1.2em; // overrides sqs-ui-font
 width: auto; // overrides sqs-ui-font
 height: auto; // overrides sqs-ui-font
 line-height: inherit; // overrides sqs-ui-font
 text-align: left; // overrides sqs-ui-font
 vertical-align: initial; // overrides sqs-ui-font
 margin-right: 0.2em;
 position: relative;
 top: 0.12em;
}

}

@import 'sqs-ui-font';

.sqs-simple-like { line-height: inherit; // overrides sqs-simple-like margin-right: 1.2em;

&:hover .like-icon {
 -webkit-animation: initial;
 -webkit-animation-timing-function: initial; }

.like-icon {
 margin-right: 1.2em;
 .sqs-ui-font(heart-2);
 background: none;
 -webkit-transition: initial;
 transition: initial;
 float: none;
 display: inline-block;
 margin-right: 0.2em;
 // height: auto;
 // width: auto;

 &:before {
   font-size: 1.2em; // overrides sqs-ui-font
   width: auto; // overrides sqs-ui-font
   height: auto; // overrides sqs-ui-font
   line-height: inherit; // overrides sqs-ui-font
   text-align: left; // overrides sqs-ui-font
   vertical-align: initial; // overrides sqs-ui-font
   margin-right: 0.3em;
   position: relative;
   top: 0;
   left: 0;
 }

}

}

.ss-social-button { .sqs-ui-font(share);

&:before {
 font-size: 0.85em; // overrides sqs-ui-font
 width: auto; // overrides sqs-ui-font
 height: auto; // overrides sqs-ui-font
 line-height: inherit; // overrides sqs-ui-font
 text-align: left; // overrides sqs-ui-font
 vertical-align: initial; // overrides sqs-ui-font
 margin-right: 0.4em;
}

div {
 display: inline-block; // sets div with no class names
}

}

.ss-social-button-icon { display: none!important; }

}

.pagination { margin-top: @postPadding*2;}

body.sidebar-position-top.collection-type-blog article { .slideshow { height: @siteWidth * 0.66; }}

/* Gallery Collections */

@-webkit-keyframes fade { from { opacity: 0; } to { opacity: 1; }}

.collection-type-gallery { height: 100%;

&.sidebar-position-left { #pageWrapper, #footerWrapper { margin-left: @sidebarWidth + @sidebarPadding; } }

&.sidebar-position-right { #pageWrapper, #footerWrapper {margin-right: @sidebarWidth + @sidebarPadding; } }

&.sidebar-fixed:not(.enable-gallery-thumbnails) { overflow: hidden; }

#canvasWrapper { height: 100%; } #page { position: static; }

#galleryWrapper { position: absolute; height: 100%; width: 100%; top: 0; right: 0; }

.meta { position: absolute; left: @outerPadding; bottom: @outerPadding; width: @sidebarWidth; z-index: 999; opacity: 0;

.slide {
 height: 0;
 overflow: hidden;
}

.slide.sqs-active-slide {
 height: auto;
}

.image-title {
 color: @headingsColor;
}

.image-desc {
 color: @bodyTextColor; padding: 15px 0 0;

 p {
   padding:0 15px 15px;
   margin:0;
 }
}

.image-title + .image-desc { padding-top: 10px; }
.image-desc p { padding-left: 0; padding-right: 0; }
.image-desc :last-child { padding-bottom: 0; }

.thumbnail-toggle { .gallery-controls-font; font-size: @galleryControlsSize; margin-top: 15px; }

.gallery-controls {
 display:block;
 font-size: @galleryControlsSize;
 padding-top: 15px;

 .gallery-controls-font;

 simpleControls {
   display: none;
   color: @galleryControls;

   .control {
     cursor: pointer;
     color: @galleryControlsActive;
   }
 }

 numberControls {
   display: none;
   margin-left: -.25em;
   // word-wrap: break-word;

   .number {
     color: @galleryControls;
     cursor: pointer;
     padding: 0 0.25em 0 0 ;

     &:hover,
     &:focus {
       color: @galleryControlsActive;
     }

     &.sqs-active-slide {
       color: @galleryControlsActive;
       font-weight: bold;
     }
   }
 }

 dotControls {
   display: none;
   margin-left: -.2em;
   margin-left: -.2rem;

   .dot {
     color: @galleryControls;
     font-size: @galleryControlsSize*2;
     cursor: pointer;
     margin-right: 0;
     font-family: georgia, serif;
     font-weight: bold;
     line-height: .6em;
     display: inline-block;
     padding: 0 .2em;
     padding: 0 .2rem;

     &:hover,
     &:focus {
       color: @galleryControlsActive;
     }

     &.sqs-active-slide {
       color: @galleryControlsActive;
     }
   }
 }
}

}

#slideshowWrapper { &::selection { background-color: transparent; } }

.overlay-controls {

position: absolute;
top: 0;
height: 100%;
z-index: 998;

&.left-control {
 left: 0;
 width: 50%;
 cursor: w-resize;
}

&.right-control {
 left: 50%;
 width: 50%;
 cursor: e-resize;
}

}

.single-image { #slideshow .slide { cursor: default; } .overlay-controls { display: none !important; } }

// hide if active slide is video slide .sqs-active-slide.video-slide { z-index: 1000 !important; }

.thumbnail-toggle { display: none; }

&.enable-gallery-thumbnails .thumbnail-toggle { display: block; cursor: pointer; }

#thumbnails { display:none; }

&.enable-gallery-thumbnails { #thumbnails { display: none; } #slideshow { display: block; } .overlay-controls { &.left-control { width: 40%;} &.center-control { left: 40%; width: 20%; cursor: n-resize; } &.right-control { left: 60%; width: 40%; } } }

&.enable-gallery-thumbnails.thumbnail-view { #thumbnails { display: block; } #slideshow, .meta { display: none !important; } .overlay-controls { display: none; } }

&.hide-meta .meta { right: 30px; left: auto; width: auto; background: @siteBackground; bottom: 30px; max-width: @sidebarWidth + 30px; z-index: 9999; .gallery-controls { margin: 0; padding: 15px; } #numberControls, #dotControls { display: none !important; } #simpleControls { display: block !important; } .image-title { padding: 15px 15px 0; }

.image-desc { padding: 15px 15px 0; }
.image-desc p { margin: 0; }

.thumbnail-toggle { padding: 0 15px; margin: 0; }

.image-desc + .gallery-controls { padding-top: 0; }

} &.gallery-controls-hide .meta .image-desc { padding-bottom: 15px; }

&.gallery-controls-simple .meta #simpleControls, &.gallery-controls-numbers .meta #numberControls, &.gallery-controls-bullets .meta #dotControls { display: block; }

#slideshowWrapper { height: 100%; margin: @galleryPadding; margin-left: @sidebarWidth + @sidebarPadding + @outerPadding; position: relative; }
#slideshow { height: 100%; overflow: hidden;
 .slide { width: 100%; height: 100%; cursor: pointer;
   &.video-slide {  }
   .image-title-mobile { display:none; margin:0.5em 0 0 0;}
   .image-desc-mobile { display:none; margin:0.5em 0 0 0;}
   .sqs-video-wrapper.video-none { height:auto !important; width: auto !important; left: auto !important; right: auto !important; }
 }
}
#thumbnails { margin: 10px; padding-bottom: @outerPadding;
 .thumb { cursor: pointer; transition: top 50ms ease-out, left 50ms ease-out; width: 300px;  background-color: rgba(175,175,175,0.1);  }
 .thumb img { width: 100%; height: 100%; }
 .thumb img:hover { opacity: 0.9; }
}

&.sidebar-position-top #slideshowWrapper { margin: 0; }

&.sidebar-position-right { [/code]

#galleryWrapper { right: auto; left: 0; }  #slideshowWrapper { margin: @galleryPadding; margin-right: @sidebarWidth + @sidebarPadding + @outerPadding; }  .meta { left: auto; right: @outerPadding;  }
&.hide-meta .meta { right: auto; left: 30px; width: auto; background: @siteBackground; }
}
}
// Gallery Controls
.gallery-controls { display:none;  .arrow-icon { background: url(/assets/lefticon.png) no-repeat center left; width: 13px; height: 10px; display: inline-block; cursor: pointer;    &.next-slide { background: url(/assets/righticon.png) no-repeat center right; }  }  .slide-count { color: @bodyTextColor; font-style: italic; margin-left: 10px; font-size: 12px; }  .grid-icon { display: inline-block; background: url(/assets/grid_icon.png) no-repeat center center; width: 12px; height: 10px; cursor: pointer; }}
.grid-visible .gallery-controls {  .arrow-icon, .slide-count, .grid-icon { display: none; }}
body.icons-light, body.blog-gallery-icons-light {  .gallery-controls {    .arrow-icon { background-image: url(/assets/lefticonlight.png); }    .arrow-icon.next-slide { background-image: url(/assets/righticonlight.png); }    .grid-icon { background-image: url(/assets/gridiconlight.png); }  }}
.collection-type-gallery.gallery-controls-hide {  .meta {    #simpleControls, #numberControls, #dotControls, .thumbnail-toggle {        display:none !important;    }  }
}
/* Forms */

#page .form-wrapper { font-size: @bodyTextSize;  input[type="submit"] { .border-radius(0); text-shadow: none; background: @buttonColor; border: none; padding: 5px 20px; .box-shadow(none); }  .field-list .field { margin-bottom: 2em; }  .field-list .field .field-element { .border-radius(2px); box-shadow: none; }  .field-list .title { font-size: 1em; font-weight: normal; color: @headingsColor; }  .field-list .caption { font-size: 0.8em; }}
/* EXTRAS**********************************************/
/* ++++++++++++++++   ++++ SOCIAL ++++   ++++++++++++++++ */
.social-links { text-align:left; margin-top: 30px;  &:before, &:after { content: ""; display:table; }  &:after { clear:both; }  a, a:visited { display:inline-block; *zoom:1; *display:inline; width:@socialIconSize; height:@socialIconSize; margin:0 10px 10px 0; color:@socialIconColor; text-decoration:none!important;    &:before { font-size:@socialIconSize; }    &:hover { color:@bodyLinkHoverColor; }  }}
.hide-social-icons .social-links { display:none; }
/*  ICOMOON SOCIAL FONT */
@import 'social-icon-font';
.social-links .service-label { display: none; }
// Social Icons.social-icons-light #sqs-header-social a { color: #fff; }.social-icons-dark #sqs-header-social { color: #111; }.social-icons-hide #sqs-header-social { display:none; }
.sqs-style-mode.sidebar-fixed.sidebar-position-left {  #headerWrapper {    left:70px;    position:absolute;  }}
html { height: 100%; }
// Loose floats, sink boatsheaderWrapper, #pageWrapper, #footerWrapper {
&:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }}.main-nav { overflow: hidden; }
/* anims for tweakbar */body.sqs-style-mode { position: relative; }
.comments-content { clear: none !important; }
// MIXINS
// Border Radius.border-radius (@a: 5px) {  -moz-border-radius: @arguments;  border-radius: @arguments;}
// Box Shadow, only allows a single value.box-shadow (@shadow: none) {  box-shadow: @shadow;}
.hidden {  display: none;  visibility: hidden;}
/* SUMMARY BLOCK**********************************************/
.summary-metadata-item {  a, a:visited {    color: @bodyTextColor;  }}

Edited August 26, 2016 by rhyann

Bernard West · February 15, 2015

I had a quick look at your site. Try adding this to your css. It roughly centres it. You may need to fiddle with padding a bit to get it perfectly centred.

#canvasWrapper {
   margin: auto !important;
   padding-right: 300px;
   min-width: 200px;
   max-width: 275px;
}

#headerWrapper {
   position: absolute !important;
   left: auto !important;
}

Let me know how that goes.

Edit: Adjusted code based on discussions in the comment section below. Note, your max-width of the content and sidebar is 450px at the moment. You can adjust that max-width value to anything between your min-width and 450px (if you want to make it smaller than 450px wide). Just change the 275px value.

Edited February 15, 2015 by Bernard West
edited code.

ToniWonKanobi · February 15, 2015

Okay so I tried that, and this is the result I got:

http://d.pr/i/EfZ+

This is probably a better place to start, since the 'content' portion is left-justified to the exact center of the display/window/context.

What I was looking to do is move the content such that the center of the main blog is the centering point.

See here:

http://d.pr/i/1hLMm+

Edited February 15, 2015 by ToniWonKanobi

Bernard West · February 15, 2015

Hi Toni. Yeah, we just need to fiddle with the padding of the elements. add this to your #canvasWrapper css that I gave you above:

padding-right: 300px;

You can adjust that value of 300 to get it exactly where you want it. 300px looks about centred on my browser.

Just check it works alright in a mobile browser. If it breaks down, we might need to insert a "minimum-width" property to stop the content from shrinking to fit a small browser window. Let me know how you go.

eta: insert "minimum-width: 200px;" in the canvaswrapper css as well. Just to be sure.

Edited February 15, 2015 by Bernard West

ToniWonKanobi · February 15, 2015

Ah. That's much better :)

Yeah I can fiddle with the padding. I don't know CSS so it's hard knowing that there is a "padding-right" string I can manipulate.

As an aside, how could I make it so that the width of the main content box is smaller?

I.e., what string modifies that value?

PS: Mobile is all messed up right now. I'll have to work on that next.

===

Update: I figured all this out :) Thanks for your help :)

Edited February 15, 2015 by ToniWonKanobi

Bernard West · February 15, 2015

Ah, sorry, I led you astray. "minimum-width" should be "min-width". That should make it display ok on a mobile. You might have to adjust the value a bit to get it right.

To make the main content smaller you need to adjust the "max-width" property of the content. It's a different selector. I'll edit in all the correct code into my original answer and you can just cut and paste it to make sure you got it right. Give me a minute to do the edit.

ToniWonKanobi · February 15, 2015

I tried that, but a lot of other elements, such as the dropdown "menu" at the top, the logo, and the site subtitle are not centered (as they should be on mobile).

Should I make changes to mobile.less to account for the custom stuff I had to add to global.less?

Bernard West · February 15, 2015

I honestly don't know. I kind of missed the mobile coding revolution. Hopefully someone with some mobile coding experience can answer that for you.

ToniWonKanobi · February 15, 2015

Oh wow. haha. I wish I would have known that. I assumed all these global.less changes I was making would be definable in the mobile.less stylesheet!

Dang!

I guess I'll have to keep messing around.

datclaiborne · February 11, 2021

@ToniWonKanobi Can I ask how you were able to fix the menu on mobile after you centered the content using the CSS code? I like the centered version too and think it looks way better on desktop but haven't figured out how to keep the mobile from having the navigation bar cut into the main content. Would really appreciate any help you can provide. Thanks!

tuanphan · February 14, 2021

On 2/11/2021 at 8:54 PM, datclaiborne said:

@ToniWonKanobi Can I ask how you were able to fix the menu on mobile after you centered the content using the CSS code? I like the centered version too and think it looks way better on desktop but haven't figured out how to keep the mobile from having the navigation bar cut into the main content. Would really appreciate any help you can provide. Thanks!

Do you still need help?

Wells: How can I center my main content?

Recommended Posts

canvas { padding: @outerPadding; min-width: 900px; }

headerWrapper { position: relative; z-index: 999; }

header, #page, #footer { padding: 0; }

page { position: relative; }

sidebarWrapper { display: none; }

topNav { margin-bottom: 20px; }

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Bernard West

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources