Masonry blog spacing issue

[camind]

hi guys…..

Just noticed that on homepage the masonry blog has spacing issues when the width is tablet or mobile size. On desktop the issue is not visible but when width is changed the spacing between the blog boxes becomes to large. See attachment

I don’t know which update created the problem but i know this wasn’t an issue on dante 3.0 or earlier.

Thanks

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
On which device are you getting this issue?
Thanks
Mohammad

[camind]

Happens on All browsers when ever width is small enough to change the 4 columns masonry from 4 into 3 or 2. So problem is visible when masonry is on 2 columns and 3 columns. Seems ok only on 4 columns. Problem will exist on small screens and tablets and mobile.

Thanks

[Mohammad – SUPPORT]

Hi,
Please check with this tool http://quirktools.com/screenfly/ and let me know your feedback.
Thanks
Mohammad

[camind]

Hi,

I used the tool and the tool shows the same issues as i described before. Tablet spacing on i-pad and kindle etc is wrong. Also if i put the desktop width to about 1020px the issue also happens. See attachments.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

The spacing is dynamic for this masonry section, it will change depending on the size of the container/screensize vs how many columns you have set to display within the container, ensuring the content fills the container/screensize.

Thanks,
David.

[camind]

Hi,

I totally understand that. The problem is with the spacing in-between the columns. Before the last couple updates the spacing in between the columns was correct and was consistent all the way from 4 columns to 1 column. But now as you can see the 4 columns look totally fine with proper spacing and then for 3 columns and 2 columns spacing gets way to large and not consistent. So to say in another way, now the spacing is what is changing to adapt to page instead of the masonry boxes like its supposed to. It doesn’t look correct and not consistent. AGAIN this wasn’t an issue before the updates.

Thanks

[David Martin – Support]

Hi,

Is there a specific set margin you need for each screen size?

I’ll run this past our Lead Developer to double check this for you.

Thanks,
David.

[Swift Ideas – Ed]

Hi @camind,

This is because your custom css is only for above 1024px wide. Change it from:

@media (min-width: 1024px) {
.masonry-items .blog-item.col-sm-3 {
    width: 24.85%!important;
    padding-left: 3px!important;
    padding-right: 3px!important;
    margin-bottom: 3px!important;
}
}

to:

@media (min-width: 1024px) {
.masonry-items .blog-item.col-sm-3 {
    width: 24.85%!important;
}
}
.masonry-items .blog-item.col-sm-3 {
    padding-left: 3px!important;
    padding-right: 3px!important;
    margin-bottom: 3px!important;
}

That should sort it.

– Ed

[camind]

Thanks Ed,

I now see why the original code was wrong. But I’m surprised that the spacing was always consistent even while the css was wrong.Only recently did i see the issue. Last time i checked spacing looked consistent even though css commanded only partial spacing. Mystery. But the new css did fix it.

Thanks Again

[Swift Ideas – Ed]

Hmm that is odd – not sure what that would have been. Glad it’s sorted.

– Ed