Reducing width of right sidebar

taomoves · Member · Jun 25, 2015 at 10:47 am
Copy link

Add topic to favorites
Hello again,

I experimented with markedly reducung my right sidebar. Is there a way to reduce the width of my right sidebar and the distance of the text within my text widgets to the right border, but only for the desktop version?

When I tried to reduce the sidebar width, it scrambled up everything in the mobile version. In the mobile version I would like my text widgets to be displayed, if possible, in full width below the text of the main text body.

On one page I created two columns in the main text body. Is it possible to also only have the two columns displayed in the desktop version? In the mobile version for readability reasons I would prefer the two columns being displayed below each other.

Thanks again to this great team for all the help I have already received so far!!!

Best wishes,
Ansgar

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jun 25, 2015 at 4:51 pm
Copy link
Hi Ansgar, you would need to include the CSS to widen the content and narrow the sidebar in the min-width 980px media query you have so that the theme can return to the original design below that point. Below that point, the widgets move below the content and the content and widgets go to 100% width. You don’t have much content yet, so I worked out the following off of the demo site for Responsive. Swap out your existing media rule for the below and see what you think.
```
@media screen and (min-width: 980px){
	.hentry{
		padding-right:5px
	}
	.col-300 {
		width: 20%;
		float: right;
	}
	.col-620 {
		width: 77%;
	}
}
```
For the page with two columns, you can include the CSS for the two columns in the above media query to have it only two columns in the desktop view. You would also have to create another rule outside of the media query that had the columns at 100% width.
taomoves · Member · Jun 27, 2015 at 1:10 pm
Copy link
Your wonderful!! Thanks so much!!

Sorry for my slow reply. I wanted to have the site online before replying. My understanding is so limited that I did not know what the CSS for the two columns was and where to place it within and outside the above media query. The page with the two columns I was talking about is this one:
http://tao-moves.com/ansgar-gerstner

Thanks a lot again!!
Ansgar
thesacredpath · Member · Jun 29, 2015 at 5:50 am
Copy link
Super, and you are welcome. What we are going to do is create two CSS classes for the left and right column and include the styling of those in the CSS. You will then replace the inline CSS style you currently have in your page (from within the page editor) with the appropriate class declarations. Add the following to your CSS at the end.
```
.left-col, .right-col {
	width: 100%;
        float: left;
}
@media screen and (min-width: 600px) {
	.left-col {
		width: 45%;
		padding: 0;
		float: left;
	}
	.right-col {
		width: 45%;
		padding: 0;
		float: right;
	}
}
```
The above duplicates the CSS you had in a media query which allows us to control when the columns go back to a single column instead of two. I chose 600px as the minimum width. Below that the two columns get pretty narrow and harder to read. The first rule above sets the base, which is both columns at 100% and floats both of them to the left. The second bit says, for screens/windows 600px and wider, do the two columns.
In your page editor, change the left opening div to this
<div class="left-col">
and change the right opening dive to this
<div class="right-col">
One of the advantages of doing it this way is that you can reuse this in other locations if you desire, simply by declaring the left-col and right-col classes.
taomoves · Member · Jun 29, 2015 at 1:05 pm
Copy link
That’s fantastic!! Worked perfectly!!
Ansgar
thesacredpath · Member · Jun 30, 2015 at 7:23 pm
Copy link
You are welcome.

No items found.