Switching Column sides

stephenbass1 · Member · Apr 16, 2014 at 11:06 pm
Copy link

Add topic to favorites
Is there any way with expound to switch the column side from the right to the left side? For example on this post? If there is not, is there a theme you could recommend that is similar?

http://the-life-study.org/2014/02/09/5-ways-to-get-all-the-motivaiton-youll-ever-need-for-exercise-and-for-life/

Thank you,

Stephen

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Apr 16, 2014 at 11:43 pm
Copy link
Well, Stephen, that was easier, and worked more cleanly than I imagined. Add the following CSS. I’ve specifically targeted single post pages only.
```
.single #primary {
	float: right;
}
```
stephenbass1 · Member · Apr 17, 2014 at 1:34 am
Copy link
I am so thankful for your help sacred path! Is there any way to make the sidebar more narrow?

Much appreciated,

Stephen
thesacredpath · Member · Apr 17, 2014 at 1:46 am
Copy link
Sure, change what I gave above to this and then add to #primary width what you take off of #secondary width. Again, I am targeting just single post pages.
```
.single #primary {
	float: right;
        width: 740px;
}
.single #secondary {
        width: 239px;
}
```
thesacredpath · Member · Apr 17, 2014 at 1:50 am
Copy link
If you want to switch the sidebar and resize on your pages too, such as on about, remove .single from before the two rules, so it looks like this.
```
#primary {
	float: right;
        width: 740px;
}
#secondary {
        width: 239px;
}
```
stephenbass1 · Member · Apr 17, 2014 at 10:34 pm
Copy link
Thanks sacred path. Sorry to make it complicated. I’m going to keep the sidebar on the right and when I put float left or nothing it does that; however, now my sidebar context is not centered like it used to be and when I change the width the mobile version is all messed up.

Sorry to be such a hassle, but I really appreciate your help!
stephenbass1 · Member · Apr 17, 2014 at 10:43 pm
Copy link
Nevermind about the sidebar centering, sorry. I would just like to change to where the content is a bit wider without hurting the mobile version if at all possible.

Also, how could I make the text of the titles smaller?

Thank you!
thesacredpath · Member · Apr 18, 2014 at 3:18 pm
Copy link
For the sidebar, add a bit of left margin to the widgets with this:
```
.widget {
    margin-left: 15px;
}
```
I should have checked closer on what happens when the theme is narrowed. The sidebar can be made narrower and still work on tablets and mobiles. How much narrower did you want the sidebar?

For changing the font size of the post/page titles, add the following and adjust.
```
.wf-active .single .site-content .entry-title {
    font-size: 55px;
}
```
stephenbass1 · Member · Apr 19, 2014 at 2:17 am
Copy link
Wonderful! I was thinking 760-800 for the content– just so the reader has more focus on the content.

Thank you!
thesacredpath · Member · Apr 19, 2014 at 3:54 am
Copy link
Hi, right now, there the width of #primary is 740px, and there is 40px of left padding on the posts themselves, yielding 700px for the post text. There are 4 media queries: the first at 1080px, next at 1020px, then 960px, and the 4th at 900px width when the sidebar moves below the content and the content goes the full width.

What I have done below, is to add take 60px away from #secondary and add it to #primary. That will yield 760px in width down to 1080px overall width, and then I’ve added 60px for for the 1020px and 960px width, and then left the 900px width alone where it goes full width. The last bit corrects a bit of a width issue with the polldaddy poll you have in the one.
```
.single #secondary {
    float: left;
    width: 200px;
    margin-left: 0
}
.single #primary {
    float: right;
    width: 800px;
    margin-right: 10px;
}

@media screen and (max-width: 1080px) {
.single #primary {
	width: 740px;
}
}

@media screen and (max-width: 1020px) {
.single #primary {
	width: 680px;
}
}

@media screen and (max-width: 960px) {
.single #primary {
	width: 620px;
}
}

@media screen and (max-width: 900px) {
.single #primary {
    width: 100%;
	margin-right: 0;
}
.single #secondary {
    width: 100%;
    margin-left: 0px;
}
}
.pds-box {
    width: 92% !important;
}
```
Give it a try and see what you think. Again, I’ve targeted the single post pages only. If you want it to apply to normal static pages (about) then you will need to modify the selectors so that they look like this:
```
.single #primary, .page #primary

.single #secondary, .page #secondary
```
stephenbass1 · Member · Apr 23, 2014 at 9:01 pm
Copy link
This is great. I just wanted it to be on my posts so the content is emphasized. It is mostly working for the mobile version; however, it turns the writing background blue and puts a strange light colored bar at the top.
Is there any way to amend this?

Also, the side bar is just slightly too narrow as it cuts off a little bit of my facebook like widget. I am not comfortable enough with CSS to change percentages as it may mess up the mobile version. An example post is

http://the-life-study.org/2014/04/19/a-different-look-on-depression-that-helps/

I promise I will not give you so much work in the future– I am just super passionate about my blog. I am so thankful for your help sacred path!
thesacredpath · Member · Apr 23, 2014 at 11:21 pm
Copy link
The blue bar you are seeing at the top is the menu/search bar of the mobile theme. Since your theme is a responsive width theme, go to Appearance > Mobile and disable the mobile theme and then view your site.

After you deactivate the mobile theme, You will notice that your header image does not resize for smaller screen widths. You can add the following to your CSS and it will resize the header, but the image gets pretty small. See what you think.
```
.site-header .site-branding {
    background-size: contain;
}
```
The facebook like box issue is something we are aware of and are working to get that taken care of. In the mean time, find the following two in your custom CSS and edit the widths as I have them below.
```
.single #secondary {
    float: right;
    margin-left: 0;
    width: 220px;
}
.single #primary {
    float: left;
    margin-right: 10px;
    width: 780px;
}
```
stephenbass1 · Member · Apr 24, 2014 at 2:28 am
Copy link
Worked perfectly with the facebook like box.
I tried the mobile idea, but it made the texting not work well. deleted it and tried to change it back but now the mobile theme wont work at all even though I reversed what I did :(
thesacredpath · Member · Apr 24, 2014 at 3:28 am
Copy link
Try clearing the browser cache on your mobile device. The rely on caches very heavily to reduce bandwidth usage and load on the cellular data systems.

No items found.