Wallpress, masonry sidebar for larger screens?

ckubs george
asked 10 years ago

As far as I see when screen size is under a certain resolution( donno 1024px, didn’t checked) the second sidebar/right sidebar goes under the content and uses masonry to move widget boxes around. On larger screen sizes( mine is 1366X768) the sidebar goes on the left of the content but it is one column only even thoug there is enough space for 2 collumns. Is there a way I can make right sidebar to use masonry on larger screens too too fill the whole space? The screensot is taken from your demo, to see what I mean. http://oi57.tinypic.com/5xiw4g.jpg
Any help is much appreciated.

2 Answers

DominicStaff
answered 10 years ago

To resolve this issue, below is our instruction:
Firstly, follow the jetpack’s guideline in the Blog article on how to use Edit CSS here. http://designwall.com/blog/using-jetpack-custom-css-for-your-wordpress-site/
Then add the code to the Edit Css:

.single-post .item { width: 100% !important; }
#sidebar-secondary { width: 440px; }

Hope this helps !

ckubs george
replied 10 years ago

In the meantime I solved it somehow. I used Responsive Width Tag plugin and zoom in/zoom out browser option to see what are the various breakpoints and added in a custom css, some code like this with different values( for various breakpoints, on a screen width higher than 1920px the right sidebar can fit even 4 collumns):

@media only screen and (min-width: 1525px) {
#sidebar-secondary {
float: left;
width: 720px ;
}

#sidebar-secondary .item {
width: 240px ;
}
}

and for the "min width1525px" the result is like this http://oi59.tinypic.com/1tptnq.jpg Your solution wasn't much helpfull because I wanted 1, 2, 3, 4 sidebar columns depending on the screen size, not to enlarge teh sidebar to fill the blank space. I guess it wasn't a big one thoug 😀
So, this is fixed and you sould think of adding something like that in the future theme updates( wallpress and DW Wall).

And finally if I dont offend few days ago I left a question about DW-QA( http://cmspioneer.com/designwall/question/dwqa-outputs-the-search-suggestions-from-my-blog-articles-how-to-avoid-that/ ) and didn't got any response, or aclue about it. I know that being a free product the support is accordingly but I don't mean necesarry to get a "fix". What I have discovered can make it on the to-do list of the future DW-QA versions, or something like that, as it's more of something not finished than a bug.

Rigor Mortis
answered 9 years ago

Hello,

As I encountered the same situation, ckubs george’s solution seemed a good one.

1. Getting more than one widget at a time in the second sidebar/right sidebar’s. The goal: use the entire width of the screen.

2. Depending of the resolution of the screen, there must be two to five widgets next to the article (on the right).

I used embedded webmaster tools in Firefox Nightly to emulate screen resolution (Tools -> Web Developer -> Responsive Design View). Then I checked on http://gs.statcounter.com for the most common screen resolutions (width is all I needed).

In WordPress, I downloaded the Jetpack extension. So I used the embedded Custom CSS Editor to cut/paste clubs george’s code. I then modified it to my needs (code down there).

I wanted my widgets to be 300px wide. So I choosed this dimension in #sidebar-secondary .item.

I soon realized that if I wanted things to work like I wanted, I had to fix the width in #sidebar-secondary at a multiple of 300. In fact, I had to estimate how many 300px widgets would fit in the available space left to the right of my content. For a 1280px screen, three widgets would do the job. Hence, 600px for the #sidebar-secondary value (see the code).

@media only screen and (min-width: 1280px) {
#sidebar-secondary {
float: left;
width: 600px;
}

#sidebar-secondary .item {
 width: 300px;
 }
}

@media only screen and (min-width: 1600px) {
 #sidebar-secondary {
 float: left;
 width: 900px;
 }

#sidebar-secondary .item {
 width: 300px;
 }
}

@media only screen and (min-width: 1680px) {
#sidebar-secondary {
float: left;
width: 900px;
}

#sidebar-secondary .item {
 width: 300px;
 }
}

@media only screen and (min-width: 2560px) {
 #sidebar-secondary {
 float: left;
 width: 1800px;
 }

#sidebar-secondary .item {
 width: 300px;
 }
}

Hope it helps.

To the developers of this very good theme: it would be nice to have this implemented in the next version. 😉