Widen Entire Travelify Theme - Switch from boxed style laout to full width


I was wondering exactly how to widen my website. I’m at:


(it’s a work in progress, obviously)

In the photo, I’ve added a couple of arrows to show what I mean. My site is just kind of a rectangle set in the middle of the page. I want to kind of ‘pull’ it out to make it cover more area of the webpage, if you know what I mean. Instead of having that that gray and white meshy-looking background image, I want my site to fill most/all of the screen.

Do you know what I mean? How can I do that? If anyone can help me out, try to pretend like you’re explaining it to a ten-year old. I’m really not very good with code and and all of that. Thank you!

Try adding this code to Appearance >> Theme Options >> Other >> Custom CSS. Then let me know what else should be changed.

.wrapper {
    max-width: 100%;
    background-color: transparent;
    box-shadow: none;
body.custom-background {
    background: #eee;
.featured-text {
    right: 20%;

Thanks so much for the reply - I really appreciate it so much. Thank God you’re here!

That has gotten rid of the gray-and-white mesh, but my layout still appears to be boxes floating in the middle of the page.

What I’d like to do is to “widen the boxes”, if you will. I would like to widen the content areas like the widgets and page contents areas so that they cover more of the screen, and if possible, minimize the spaces between them.

Before and now, the widgets and page content seem to just be floating boxes in the middle of the page, but I want the boxes to be widened out and, while maybe not flush against, pretty closely up against the edges of the browser window. There’s a lot of dead space that could be utilized if everything was a bit wider.

Is that possible to do?


I was thinking something along the lines of this site:

There’s a lot less unused space, and I like that. It makes fuller use of the width of the browser window. Is that possible? I hope so!! I’d hate to start over - I love this theme :frowning:

Try adding this code to the same Custom CSS field and let me know what else you would like to change.

.widget, article {
  background: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;

@media only screen and (min-width: 767px) { 
  .container {
      max-width: 1192px;
  #main {
    padding: 20px;

  #secondary {
    width: 29%;
    margin-left: 0;
  #primary {
    width: 71%;
  #branding {
    margin-top: 0;
  #footerarea {
    margin-bottom: 0;