Make sidebar slightly wider for Travelify WordPress theme

Travelify
1

I have the Travelify theme and am using the right sidebar and would like to make it slightly bigger (by about 25 px). How can I do this?

2

On what exactly you want to save this space? On content area, margins arounds sidebar and content area or make the entire website wider?

3

Making the entire website wide would be fine. I don’t want to decrease the content size…I just want to make the whole sidebar a little bit wider.

4

Try adding this code to Appearance >> Theme Options >> Other >> Custom CSS.

.wrapper {
  max-width: 1043px;
}
#main {
  padding: 20px 2%;
}
.container {
  max-width: 1003px;
}

#primary {
	width: 64.5%;
}

#secondary {
  float: left;
  margin-left: 2.5%;
  width: 32.5%;
}

This code will make your website slightly wider while keeping content area the same width but will increase sidebar.

Let me know if this helps. If not please post your website URL, so I can provide you more accurate solution.

5

Hi there, could you please tell me how to make the content area say 100px wider and the sidebar the same?

Thanks very much!

6

@neo35813

Please post your website URl and I will look if there is anything I can help with.

7

Thanks for your reply Aigars. The URL is http://newsite.erinstern.com/blog/

I would just like a wider page overall but same width sidebar.

Thanks very much!

8

@neo35813

You can make content 100px wider while keeping sidebar the same by adding this simple CSS to your WordPress Dashboard >> Appearance >> Theme Options >> Other.

.wrapper {
    max-width: 1118px;
}
.container {
    max-width: 1078px;
}
#secondary {
    width: 29%;
}
#primary {
    width: 67%;
}

Let me know if there is anything else.

9

Thanks very much for that Aigars, however that has caused both the gap between the content and the sidebar and the gap to the right of the sidebar to become bigger.

Is it possible to keep these the same? And I would actually like a total page width of 1245px, with standard sidebar width if possible.

Thanks again!

10

Replace my previously given code and replace it with this one instead:

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

  #secondary {
    width: 29%;
    margin-left: 2%;
  }
  #primary {
    width: 69%;
  }
}

Also make sure to update your WordPress installation to the latest version as this version you are using is outdated and could be easily compromised because WordPress team have introduced several security patches since WordPress 3.8.1 that you use on your website.

11

Thanks very much again Aigars that worked perfectly. I think you just missed my last point however, I actually would like to make the total page width 1245px if possible, with sidebar width kept the same and the gaps kept the same.

Regarding the Wordpress version, yes I have actually just updated it. The original site designer installed a plugin to disable updates of Wordpress core and plugins, I don’t know why. Anyhow I disabled that and updated everything.

Thanks so much again for your help!

12

Ok, I didn’t notice the width you mentioned. Replace my previously give code with this one instead:

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

  #secondary {
    width: 25%;
    margin-left: 2%;
  }
  #primary {
    width: 73%;
  }
}

Let me know if this is what you were looking for.

13

Thanks very much Aigars, that’s perfect!

14

I’m glad I could help :slight_smile: