2

I am trying to create a tumblr theme using a masonry grid layout. I want all the posts (.entry) to be 25% of the width of the page. However, the sidebar is not being taken into account when loading the images. The images always end up spilling over the side of the page by 17px, the same width of the scrollbar in my browser.

I tried to remedy this by setting the scrollbar to 5px and setting the container of the the posts (#content) to (100% - 5px). This worked great in Chrome but not in all browsers.

I do not want to hide the scrollbar. I am sure that the issue is due to masonry, as positioning 4 divs at 25% width outside of the masonry container works fine.

The full code can be seen here. The theme can be viewed here. Relevant code below:

Masonry Code

$(function(){
var $container = $('#content');
$container.imagesLoaded(function() {
    $container.masonry({
        itemSelector: '.entry',
        columnWidth: '.grid-sizer',
        percentPosition: true,
        isAnimated:true,
        columnWidth:1,
        animationOptions:{duration:350, queue:false},
        isFitWidth: false,
    });
});

CSS

#content{
position: relative;
text-align: center;
width: 100%;
height: 100%;}

body {
margin: 0;
font-family: {font:Main Text}; 
font-weight:400;
font-size: 11px;
line-height: 18px;
color:{color:Post Text};
text-align: left;
min-height: 110vh;
word-wrap: break-word;
background-color: {color:Background};
width: 100%;}

.entry{
background-color:{color:Post Background};
text-align: left;
position: relative;
overflow: hidden;
width: calc((100%) / 4);
margin:0;
padding:0;
border:0;
float: right;}

.grid-sizer{width: calc(100% / 4);}
RKC
  • 86
  • 6
  • why are you doing `width: calc(100% / 4);` instead of `width: 25%;`? Also, for my browser it just shows 3 in a row. Also, you have `columnWidth` set twice, one time as `'.grid-sizer'` and another as `1` – Joe Lissner Jun 24 '17 at 16:22
  • @JoeLissner Thanks for the response. I had it set to that as I was constantly changing between the number of rows (2,3,4 etc.). I should have edited it for the sake of this question, but it has no effect in the code anyway. I know it shows 3 - because the scrollbar is not being included in the width, so I can't fit 4 items in (that's the problem). In some browsers they overflow, and in some they move into 3 columns. I removed the second columnWidth (thanks for spotting it, I completely missed it somehow) but now the images are all piling up on top of each other. – RKC Jun 25 '17 at 01:14
  • Due to the plugin you are using, the images are being positioned absolutely on render meaning that it's hard to troubleshoot it if we can't get in before the render. Do you think you could create a jsfiddle of your issue for us to play with? – Joe Lissner Jun 25 '17 at 04:14
  • What about setting `.entry { width:20% }` assuming .grid-sizer is a direct child of the wrapper. https://masonry.desandro.com/options.html#percentposition – lharby Jun 26 '17 at 08:17

1 Answers1

0

A hack solution is to add a min-height to the masonry container that is bigger than the window so that the scrollbar is always there.

i.e.

#content { min-height: 101vh; }
chloe784
  • 609
  • 3
  • 15
  • Thanks, but I had actually already done this. It doesn't work, unfortunately. – RKC Jun 28 '17 at 20:26
  • Have you tried adding the min-height to the body? Also as a side note, what you have ow works on my mac on chrome, probably due to the hiding native scrollbar. – chloe784 Jul 04 '17 at 03:39
  • If that doesn't work, maybe try adding this? `$(window).resize(function(){$("#content").masonry(); });` – chloe784 Jul 04 '17 at 03:41