Jump to content

Wells: How can I center my main content?

Recommended Posts

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:

alt text

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;  }}

Link to comment
  • Replies 10
  • Views 5.4k
  • Created
  • Last Reply

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.

Link to comment

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.

Link to comment

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 :)

Link to comment

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.

Link to comment
  • 5 years later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.