By David Montoya on Monday, 16 May 2016
Posted in Technical Issues
Replies 7
Likes 0
Views 1K
Votes 0
Easyblog Layouts Page

When the page initially loads it'll correctly display 3 columns. When the page finishes loading, though, it'll go into 2 columns. This is only resulting within Firefox; Chrome, Safari, and Opera for Windows have no problems. Any ideas? I'm not finding any problems within the CSS.

Hey David,

Can you update your Joomla backend and FTP access so we can better have a check?
·
Monday, 16 May 2016 15:21
·
0 Likes
·
0 Votes
·
0 Comments
·
Info updated!

Ooo, off-topic suggestion. You could possibly store the backend credentials to this site's user Dashboard so it's always in one location versus having to re-enter on multiple posts. Just a thought.
·
Monday, 16 May 2016 18:29
·
0 Likes
·
0 Votes
·
0 Comments
·
Hey David,

You have customized the theme file in /templates/jooswatch-v3-5/html/com_easyblog/blogs/latest/default.main.php and it is entirely different than the logics in the original nickel theme. Your logics in detecting the column is incorrect. Please refer to the original nickel theme

Secondly, you can always add your site details only once at http://stackideas.com/dashboard/site
·
Monday, 16 May 2016 18:45
·
0 Likes
·
0 Votes
·
0 Comments
·
...well I'm blind. *laughs* Thanks for the link!

Not at a computer at the moment, but I don't see what could be causing the problem directly. Instead of calculating DIV style width, it assigns a Bootstrap styling. And I still can't figure out why only Firefox is affected... All other browsers render correctly.
·
Monday, 16 May 2016 21:53
·
0 Likes
·
0 Votes
·
0 Comments
·
You can't just use the columns from bootstrap. It needs to be adjusted especially the width because of masonry. See the codes in /components/com_easyblog/themes/nickel/blogs/latest/default.main.php



What I would suggest is for you in the future, to first rename the folder /templates/jooswatch-v3-5/html/com_easyblog and see if nickel works as it should first
·
Monday, 16 May 2016 22:01
·
0 Likes
·
0 Votes
·
0 Comments
·
Oh how weird. I couldn't see the change because masonry appears to be dependent upon DIV width before load. Other column widths will need to be tweaked, but this CSS fix did it for 3-column view:

@media (min-width: 1200px) {
div#fd.eb .col-lg-4 {
width: 33% !important;
}
}


In a nutshell (for anyone else trying this), whatever $grid_size = 99 / $column; calculates to, the CSS width needs to match for masonry to work properly on all browsers. Thanks for pointing me in the right direction.
·
Wednesday, 18 May 2016 13:01
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks for sharing David
·
Wednesday, 18 May 2016 13:27
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post